web-dev-qa-db-fra.com

info-bulle des outils jQuery - Modifier le titre

Vous avez un problème avec l'infobulle des outils du plug-in jquery (http://flowplayer.org/tools/tooltip/index.html)J'ai besoin de changer le titre de l'élément ..

   reloadTooltip();
   $("#example").attr('title', obj.text);
   reloadTooltip();

   function reloadTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

Partie html:

   <span title="text" id="example"></span>

Avec ma solution, j'ai finalement obtenu 2 titres, l'un au dessus de l'autre. Le déshabillé (ignoré js), est le nouveau. Le titre de l'info-bulle Outils n'a pas encore changé.

je vous remercie

jquerytooltiptitlejquery-tools
15
smo

Je suis sur le point de faire la même chose. J'ai parcouru le code du plugin Tooltip et découvert un moyen simple et rapide de mettre à jour l'info-bulle. Le plugin supprime l'attribut title et place ce contenu dans une propriété d'élément appelée tooltipText. Dans jQuery 1.6+, il peut être manipulé de la manière suivante:

// get the current tooltip content
$('#someElement').prop('tooltipText')

// set the tooltip content
$('#someElement').prop('tooltipText', 'w00t');

Le plug-in définit la propriété tooltipText (notez la capitalisation) à la ligne 55 dans la version 1.3. Les modifications apportées de cette manière sont instantanées, pour autant que je sache.

Si vous manipulez directement des éléments, le contenu de l'infobulle est à:

var e = document.getElementById('#someElement');
alert(e.tooltipText);
e.tooltipText = 'w00t';
19
Marty Vance

got it! selon la dernière version de tooltip (à partir de v2.3.1) https://github.com/Twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 . .vous devez définir l’attribut (pas la propriété) 'data-original-title' car celui-ci correspond à l’info-bulle actuellement utilisée.

C'est un bidouillage mais j'espère que cela fonctionnera pour vous comme cela a fonctionné pour moi.

$('#example').attr('data-original-title','the new text you want'); //and that's it.
16
alexserver

Je ne sais pas si vous cherchez toujours la réponse à cette question, mais je viens de passer quelques bonnes heures à essayer de trier la même chose et à trouver la réponse (aussi simple qu’elles le sont une fois que vous les avez trouvées!) Documentation.

Quel que soit l'élément, c'est que vous ayez défini l'info-bulle en premier lieu, vous devez en obtenir l'API et défini la nouvelle valeur. c'est-à-dire si vous définissez l'info-bulle sur un élément avec l'id "myTip"

$('#myTip').data('tooltip').getTip().html("New string!") ;

Et voilà.

Vous ne devriez pas avoir besoin de supprimer le titre (et de toute façon, car les info-bulles sont initialisées paresseuses). Utilisez plutôt la configuration de cancelDefault:

http://flowplayer.org/tools/tooltip/index.html

8
Chris

Toutes les autres options ne fonctionnaient pas dans la dernière version de tooltipster (3.3.0) J'ai trouvé cette commande efficace:

$('#selectorElement').tooltipster('content', 'new title');
4
Roy Shmuli

Que dis-tu de ça?

   initTooltip();
   updateTooltip(obj.text);


   function initTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

   function updateTooltip(text){
       $("[title]").attr('title', text);
       $("[title]").data('title',text);
       $("[title]").removeAttr("title");   
    }

Je ne sais pas si c'est la meilleure approche mais je pense que cela pourrait fonctionner pour vous.

L'objet est-il correct? Qu'est-ce qui vient en obj.text?

2
Rui Lima

Rien n'a fonctionné pour moi si ce n'est de réinitialiser l'info-bulle:

        //Save the current configuration.
        var conf = trigger.data('tooltip').getConf();
        trigger.removeData('tooltip').unbind();
        //Add the changed text.
        var newText = 'Hello World!';
        trigger.attr("title", newText);
        //Reapply the configuration.
        trigger.tooltip(conf);

Les réponses précédentes impliquant getTip () requièrent que l'info-bulle soit affichée au moins une fois; sinon, getTip () donne la valeur null.

Utiliser OnBeforeShow a presque fonctionné pour moi, mais je ne savais pas comment désassembler l'événement pour qu'il ne s'exécute pas à chaque fois que je le montre.

Changer le titre n'a pas fonctionné pour moi pour une raison quelconque, probablement parce que j'utilisais une mise en page personnalisée.

1
John

Une autre solution pour changer le titre de manière dynamique consiste à utiliser l'événement onBeforeShow:

jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow});

...

function tooltipBeforeShow() {
  // On production you evaluate a condition to show the apropiate text
  var text = 'My new text for the <b>tooltip</b>';
  this.getTip().html(text);
}

this fait référence à l’objet info-bulle de la fonction événement

1
Ismaelj

Meilleure infobulle pour moi! Cette info-bulle comme sur Gmail

enter image description here

sur le site principal:

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">

Sur HTML:

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

Sur les codes Javascript:

$(function() {
    $('.example').tipsy();
});

Visiter la démo jsfiddle

0
mghhgm

Tout ce qui précède ne fonctionne pas avec la dernière version de tooltipster, voici comment:

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";
0
Rabih Kodeih

Essayez de modifier la valeur du titre en appelant la méthode data ("title") de jQuery. 

0
Marco Schmid

J'ai aussi eu du mal avec ça. Et ce code a fonctionné pour moi:

$('.yourelement').attr('tooltipText', newToolTip);

Veuillez noter les majuscules T. Les minuscules T ne fonctionneront pas.

0
live-love

Cela a fonctionné pour moi:

$ ('# votreID'). attr ('data-original-title', 'Nouveau message'). tooltip ('show'). tooltip ('hide');

0
FD gi