L'info-bulle Bootstrap ne se cache pas lorsque le modal est déclenché si placement = body

Question

J'ai une grille de kendo dans laquelle chaque ligne a un bouton d'édition. J'utilise Bootstrap pour ajouter une info-bulle au bouton d'édition, ainsi que d'autres choses. Le bouton d'édition affiche une fenêtre pour éditer les attributs du modèle de ligne.

L'info-bulle a continué à être coupée par les limites de la grille. Pour résoudre ce problème, j'ai utilisé placement = body lors de l'initialisation des info-bulles.

Le problème que j'ai maintenant, c'est que l'info-bulle ne se cache pas si le bouton est cliqué, et la fenêtre de l'éditeur apparaît. J'ai essayé de changer la gâchette juste pour être "hover", mais cela n'a pas aidé.

J'ai essayé de faire ('[title]'). Tooltip ('hide') dans l'événement d'édition de la grille, mais cela ne semble pas fonctionner du tout.

Je crois que le problème a à voir avec 'edit' ouvrant une fenêtre de kendo. Parce que les autres boutons avec des info-bulles sont bien, car ils déclenchent un BootstrapDialog.

Answer 1

Ce qui arrive est que le .tooltip a un z-index de 1070 alors que .modal a un z-index de 1050.

Vous pouvez ajouter ce qui suit à votre css pour faire en sorte que .tooltip est affiché ci-dessous. modal:

.modal{ 
    z-index: 1071; 
} 

Bien sûr, cela signifie que vous ne pouvez absolument pas avoir une info-bulle affichée à partir de l'intérieur votre modal, donc cela ne peut-être pas répondre à vos besoins spécifiques. Si c'est le cas, vous devriez être en mesure d'ajouter une autre classe à votre div tooltip et de surcharger l'index z de cette classe. Je suis bien conscient de la nature de ce correctif, mais j'ai cherché une solution pour cela pendant des semaines et je n'ai rien trouvé de mieux.