Utilisation de

Bonjour,

Débutant en JS et bootstrap, je cherche à utiliser le TOOLTIP de Bootstrap (lien ici: http://getbootstrap.com/javascript/#tooltips ). Voici le code :

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    lorem lorem !
  </div>
</div>

par défault, le hover sur le <a> affiche la valeur de l'attribut title ( ici : Some tooltip text! ).
A la place, je veux faire apparaitre le contenu de la <div class="tooltip-inner"> ( ici : lorem lorem ! )
Je n'arrive pas à faire le lien entre la balise <a> et le contenu du block en dessous qui s'affichera au hover de cette balise <a>.

quelle est la bonne solution ??

Merci d'avance pour votre aide !

Bonjour,

Ce que tu demande n'a pas vraiment de sens, dans le bout de code que tu as collé ici la deuxième partie (Generated markup by the plugin) ne doit pas être présente dans ta page, c'est du HTML généré dynamiquement par le plugin en fonction des attributs de ton lien data-toggle=tooltip.

<a href="#" data-toggle="tooltip" title="lorem lorem !">Hover over me</a>

Si tu écris "lorem lorem !" en title de ton lien, la balise .tooltip-inner générée contiendra "lorem lorem !"
Bien sur pour que cela fonctionne il ne faut pas oublier d'initialiser le plugin de cette manière :

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

merci pour ta réponse freez,

dsl si j'ai pas été clair.

et donc si je veux afficher une <div>, avec divers éléments dedans, à la place de la valeur de l'attribut title ("lorem lorem !" dans notre exemple) ?

Dans ce cas il faut regarder les options du plugin (http://getbootstrap.com/javascript/#tooltips-options).
Tu peux insérer un contenu différent de celui de l'attribut title via l'option "title", si tu souhaite pouvoir insérer du HTML dans le contenu du tooltip tu peux setter l'option "html" à true.

$('#mon-lien').tooltip({
    title : "Titre <strong>personnalisé</strong>",
    html : true
});

merci freez pour ta réponse.

mais je pense pas que ça convienne à mon besoin, car le contenu que je souhaite insérer à la place de l'attribut title est assez long!

en fait je pensais pouvoir trouver une solution qui soit sur le même modèle le "tab" de bootstrap (http://getbootstrap.com/javascript/#tabs).

Je voudrais avoir une structure similaire à ca :

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

=> au clic sur le <li>, ca affiche le contenu de la balise <div role="tabpanel" class="tab-pane active" id="home">...</div>.

j'aimerais exactement la même chose, à la différence que je voudrais un affichage au hover du <li> et pas au clic.

je pense que ça doit juste se faire par un changement de la fonction javascript, mais je sais pas faire !

si tu as la réponse ...

merci à toi en tout cas!
Modifié par fabiolm (09 Mar 2015 - 13:36)

Une solution (adaptée à la structure que tu as mis en exemple) :

$('.nav-tabs li').on('mouseenter', function(){
    $(this).children().trigger('click');
});