Salut les gars !

Petite question CSS, j'utilise bootstrap et je veux afficher une infobulle (tooltip) sur une image. Normalement rien de plus simple.
Voici ce que je fais (extrait):

    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>

    <aside>
        <ul class="list-unstyled text-center">
            <li><img src="/Content/Images/ic_people_white_48dp_1x.png" data-toggle="tooltip" data-placement="right" title="" data-original-title="Compte"></li>
        </ul>
    </aside>

Et mon CSS (extrait également):

body, html {
    margin-left: 0;
    margin-top: 0;
    background-color:#dddddd;
    width:100%;
}

aside {
    width: 90px;
    background-color: #333333;
    position: absolute;
    top: 60px;
    bottom: 0;
    color: #dddddd;
    padding-top:20px;
}

Mais le rendu n'est pas bon, j'ai un bug lors de l'affichage du tooltip.



Est-ce que l'un d'entre vous aurait une idée de la raison ? Ou un moyen de contourner ce problème ?

Je suppose que tu utilises Bootstrap ?

J'ai fait un JsFiddle avec ton morceau de code et les ressources nécessaires, mais je ne rencontre pas le souci que tu as. Il doit y avoir des éléments externes au code que tu as donné qui influent sur le résultat. Peux-tu regarder ?

Argh j'ai capté !
J'ai une classe .right définie dans un autre CSS (qui est référencé par erreur sur cette page...), et le tooltip de jquery utilise également une classe .right.
La mienne a un "width:45%".




Merci Guy !