J'essaie de créer un plugin d'info-bulle personnalisé juste à des fins d'apprentissage. Tout fonctionne correctement lorsque je prends le texte de l'info-bulle dans un attribut personnalisé tel que " info-bulle ", mais en cas de " titre ", je ne peux pas masquer / désactiver le navigateur par défaut info-bulle de titre.

HTML:

<p id="p1" title="tooltip 1">Go</a>">
    This is a paragraph
</p>

<p id="p2" title="tooltip 2">
    This is another paragraph
</p>

JQuery:

$("p").tooltip({
    autoClose: false,
    color: "white   ",
    backgroundColor: "grey",
});

Violon de travail

1
Mayank Pandeyz 17 janv. 2017 à 13:58

2 réponses

Meilleure réponse

Dans votre JSFiddle fourni, vous avez le code suivant

var tooltipContent =  $(this).attr('data-ttl');
var newElem = '<span class="tooltip">'+ tooltipContent +'</span>';

Au lieu d'ajouter un titre, essayez d'ajouter l'attribut de données suivant dans votre balise P

<p id="p1" data-title="tooltip 1">Go</a>">
    This is a paragraph
</p>

<p id="p2" data-title="tooltip 2">
    This is another paragraph
</p>

Et changez le code pour suivre

var tooltipContent =  $(this).data('data-title');
var newElem = '<span class="tooltip">'+ tooltipContent +'</span>';

Veuillez trouver le JS Fiddle mis à jour.

MODIFIER

Si vous vérifiez l'info-bulle de l'interface utilisateur jQuery, l'info-bulle par défaut du navigateur n'apparaît pas. Info-bulle de l'interface utilisateur jQuery

La raison en est que, si vous cochez HTML dans la fenêtre de l'outil de développement, vous pouvez voir la bibliothèque elle-même supprimer le contenu de l'attribut "title" au mouseenter et le réinitialiser à nouveau au passage de la souris. Après avoir examiné votre violon, il semble que vous ajoutez votre propre logique pour afficher et masquer l'info-bulle. Eh bien, si vous ajoutez votre logique personnalisée, vous devez également gérer tous ces cas. Effectuez l'étape suivante pour avoir le même comportement que l'info-bulle jQuery par défaut.

Supprimez le contenu de l'attribut "titre" lorsque vous créez une info-bulle et affichez (sur la souris, entrez).

Stockez ce contenu quelque part ou dans l'attribut "data" de la balise.

Réinitialisez le contenu à l'attribut "title" lorsque l'utilisateur déplace la souris du contrôle.

Veuillez vous référer à ce JS Fiddle avec une solution pour votre problème. J'ai modifié votre événement de clic d'info-bulle pour restaurer le contenu du titre

JS Fiddle mis à jour

2
K D 17 janv. 2017 à 11:55

Vous ne pouvez pas désactiver l'info-bulle personnalisée du navigateur (vous pouvez le faire avec javascript et non par défaut). Cependant, vous pouvez utiliser cette astuce:

<p id="p1" data-title="tooltip 1">
    This is a paragraph
</p>

Sur jquery, vous pouvez obtenir une variable de data-title:

var tooltipContent =  $(this).attr('data-title');
0
Yigit Yuksel 17 janv. 2017 à 11:15