Tout d'abord, l'info-bulle fonctionne pour toutes les directions, en haut, en bas et à gauche. Mais pour le droit ne fonctionne pas.
Je pense donc que c'est peut-être un problème avec la structure CSS ou HTML. (Mais l'info-bulle est dans une position absolue, donc je ne sais pas pourquoi cela se produit.)
HTML
<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
<div class="arrow" style="top: 8px;" />
<div class="tooltip-inner">Dashboard</div>
</div>
Dans le javascript, je fais ceci:
$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'right'
});
});
Comme je l'ai dit, pour tout autre placement, cela fonctionne bien. Mais pour le droit, il a cassé!
En fait, je ne sais pas pourquoi, mais c'est le rendu avec les propriétés de gauche:
<li class="">
<div class="hover-highlight ml-2">
<a class="" href="#">
<i data-toggle="tooltip" title="Dashboard" class="icon-meter"></i>
<span>Dasboard</span>
</a>
</div>
</li>
Le problème
D'accord, j'ai trouvé le problème. ressemble à bootstrap automatiquement pousser votre texte en fonction de la div parent. Par exemple, si votre info-bulle se trouve à droite de la fenêtre, vous ne pouvez pas la forcer à être placée à droite.
Je ne sais pas comment résoudre ce problème.
CODE
Veuillez vérifier le code ici:
4 Réponses :
Je pense que vous devriez mettre le placement dans une propriété de données de l'élément:
<button data-toggle="tooltip" data-placement="left"> tooltip </button>
Vous devez mettre le texte dans une propriété data de l'élément
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<li class="">
<div class="hover-highlight ml-2">
<a class="" href="#">
<i data-toggle="tooltip" title="Dashboard" class="icon-meter">
<span>Dasboard</span>
</i>
</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'right'
});
});le problème, ce sont les marges de div, jetez un œil:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div data-toggle="tooltip" title="Gestión de Usuarios" class="theproblem">
Hola mundo
</div>
</div>
</div>.theproblem {
margin-left:140px;
margin-top:140px;
}$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]',placement: 'top' });
});aussi Fiddle
Mais dans cet exemple, vous le poussez vers la gauche et allez vers la droite. .
désolé, a changé de direction
Dans votre exemple, je peux le pousser vers le bas ou vers la droite. Mais à gauche ou en haut est impossible
@ValRob n'oubliez pas de cliquer sur `` exécuter '' en haut du violon après le changement de code
Ouais, mais, ça ne peut pas aller en haut ou à gauche
Continuons cette discussion en chat .
Oui merci. Il semble qu'il ait besoin d'un minimum d'espace pour afficher l'info-bulle. La solution est donc de donner une taille plus grande à l'élément parent.
@ValRob ouais, n'oubliez pas le vote positif, pas seulement cocher comme réponse)
Le problème est que cela modifierait radicalement le look, comment faire cela sans changer le look
Meilleure solution:
$('[data-toggle="tooltip"]').each(function() {
$(this).data('bs.tooltip').config.placement = 'right';// For dynamic position
$(this).data('bs.tooltip').config.boundary= 'right'; // Used for tooltip boundary range
});
pouvez-vous créer un extrait de violon ou de pile?
Je vais essayer, donnez-moi du temps.
@ 20yco fait: bootply.com/2zE4Zb3cva