web-dev-qa-db-fra.com

Image dans l'infobulle en utilisant bootstrap?

<button title="Tooltip on right" data-placement="right" data-toggle="tooltip" class="btn btn-default mrs" type="button">Tooltip on right</button>


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

Cela fonctionne bien, mais j'aimerais inclure une image et du texte dans l'infobulle. J'ai essayé d'utiliser data-content = "some stuff" mais cela ne montre rien.

javascriptjquerytwitter-bootstrapfrontend
15
dkx22

Vous devez passer l'option html à lorsque vous initialisez .tooltip. par exemple.

<div class="cart"> 
    <a data-toggle="tooltip" title="<img src='http://getbootstrap.com/Apple-touch-icon.png' />">
        <i class="icon-shopping-cart"></i>
    </a>

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    html: true
});

Voir l'exemple violon

35
joshvito