IP Girl
  1. IP Girl
  3. Bootstrap Tooltip fonctionne mais est masqué en raison de z-index?
Intereting Posts
Pourquoi devrais-je implémenter ICloneable dans c #? Html.DropdownListFor valeur sélectionnée non définie Ajout d’atsortingbut dans jQuery Comment définir Meld comme git mergetool Comment sélectionner une sous-requête en utilisant Laravel Query Builder? Comment configurer plusieurs sous-domaines dans Express.js ou Connect.js Transfert de port inversé? Retarder avant que ‘O’ ouvre une nouvelle ligne? Afficher la stack d’activités de la tâche Erreur du compilateur: memset n’a pas été déclaré dans cette scope PHAsset à UIImage Que fait la méthode registerNatives ()? Comment supprimer le dernier caractère d’une chaîne en C #? Recherchez la version d’un paquet npm installé Commande pour montrer la différence entre un tampon et son fichier correspondant

Bootstrap Tooltip fonctionne mais est masqué en raison de z-index?

Si vous passez le curseur au-dessus du premier crayon, vous pouvez voir l’info-bulle qui apparaît, mais elle est masquée.

Comment puis-je dire à toutes les info-bulles de s’afficher au-dessus de tout le rest?

Code pertinent 

$('.nav-text').on('click', null, function () { alert('heyo'); }); $('.nav-text').tooltip({ 'placement': 'right', 'title': 'heyo' });

Exemple complet 

 $('.down').click(function() { var $move = $('.side-study-box ul'); $move.css({ top: '-=20px' }) }) $('.up').click(function() { var $move = $('.side-study-box ul'); $move.css({ top: '+=20px' }) }) $('.nav-text').on('click', null, function() { alert('heyo'); }); $('.nav-text').tooltip({ 'placement': 'right', 'title': 'heyo' }); 
 .side-study-box { background-color: white; color: black; border: 1px solid #3D6AA2; text-align: center; height: 160px; display: table !important; margin: 0px !important; margin-left: -1px !important; } .side-study-box .viewport { height: 120px; overflow: hidden; position: relative; } .side-study-box span { position: relative; width: 100%; font-size: 24px; display: table-cell; vertical-align: middle; } .side-study-box textarea { position: relative; height: 195px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: auto; font-size: 18px; font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New; display: table-cell; vertical-align: middle; resize: none; } .side-study-box i { margin: 0px !important; padding-right: 1px; } .side-study-box .side-box-menu { border-right: 1px solid #335987; width: 28px; text-align: center; height: 100%; } .side-box-menu-nav { display: inline-block; cursor: pointer; text-decoration: none !important; margin: 0px; width: 100%; background-color: #3D6AA2; color: white; } .side-box-menu-nav:hover { background-color: #335987 !important; color: white !important; } .side-study-box ul { list-style-type: none; margin: 0px; margin-left: -1px !important; padding: 0px; padding-right: 2px; height: 100%; color: #335987; position: absolute; top: 0; } .side-study-box ul li { margin: 0px; } .side-study-box ul li :hover { color: black; } .side-study-box ul li a { padding-left: 3px; cursor: pointer; text-decoration: none; display: inline-block; margin: 0px; color: gray; } .side-study-box ul li a .side-box-menu-control { padding-top: 3px; height: 23px; } 
    
 
  
 
     
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •

Il suffit de définir la position de l’info-bulle sur fixed , comme ceci: 

 .tooltip { position: fixed; }

Voir la démo de travail

Il suffit de définir data-container . 

  hover over me