Réponses:
Avant d'écrire du code, discutons de la différence entre les attributs et les propriétés. Les attributs sont les paramètres que vous appliquez aux éléments de votre balisage HTML ; le navigateur analyse ensuite le balisage et crée des objets DOM de différents types qui contiennent des propriétés initialisées avec les valeurs des attributs. Sur les objets DOM, comme un simple HTMLElement
, vous voulez presque toujours travailler avec ses propriétés , pas avec sa collection d' attributs .
La meilleure pratique actuelle consiste à éviter de travailler avec des attributs à moins qu'ils ne soient personnalisés ou qu'aucune propriété équivalente ne le complète. Puisqu'il title
existe en effet une propriété de lecture / écriture sur de nombreux HTMLElement
s, nous devons en profiter.
Vous pouvez en savoir plus sur la différence entre les attributs et les propriétés ici ou ici .
Dans cet esprit, manipulons cela title
...
title
propriété d' un élément sans jQueryÉtant donné qu'il title
s'agit d'une propriété publique, vous pouvez la définir sur n'importe quel élément DOM qui la prend en charge avec du JavaScript simple:
document.getElementById('yourElementId').title = 'your new title';
La récupération est presque identique; rien de spécial ici:
var elementTitle = document.getElementById('yourElementId').title;
Ce sera le moyen le plus rapide de changer le titre si vous êtes un écrou d'optimisation, mais puisque vous vouliez impliquer jQuery:
title
propriété d' un élément avec jQuery (v1.6 +)jQuery a introduit une nouvelle méthode dans la v1.6 pour obtenir et définir les propriétés. Pour définir la title
propriété sur un élément, utilisez:
$('#yourElementId').prop('title', 'your new title');
Si vous souhaitez récupérer le titre, omettez le deuxième paramètre et capturez la valeur de retour:
var elementTitle = $('#yourElementId').prop('title');
Consultez la prop()
documentation de l' API pour jQuery.
Si vous ne voulez vraiment pas utiliser les propriétés, ou si vous utilisez une version de jQuery antérieure à la v1.6, alors vous devriez lire:
title
attribut d' un élément avec jQuery (versions <1.6)Vous pouvez modifier l' title
attribut avec le code suivant:
$('#yourElementId').attr('title', 'your new title');
Ou récupérez-le avec:
var elementTitle = $('#yourElementId').attr('title');
Consultez la attr()
documentation de l' API pour jQuery.
Dans les boîtes de dialogue modales jquery ui, vous devez utiliser cette construction:
$( "#my_dialog" ).dialog( "option", "title", "my new title" );
je crois
$("#myElement").attr("title", "new title value")
ou
$("#myElement").prop("title", "new title value")
devrait faire l'affaire ...
Je pense que vous pouvez trouver toutes les fonctions de base dans les documents jQuery , bien que je déteste le formatage.
Une autre option, si vous préférez, serait d'obtenir l'élément DOM de l'objet jQuery et d'utiliser des accesseurs DOM standard dessus:
$("#myElement")[0].title = "new title value";
La "façon jQuery", comme mentionné par d'autres, consiste à utiliser la méthode attr (). Voir la documentation de l'API pour attr () ici .
jqueryTitle({
title: 'New Title'
});
pour le premier titre:
jqueryTitle('destroy');
En complément de la réponse @ Cᴏʀʏ, assurez-vous que le titre de l'infobulle n'a pas déjà été défini manuellement dans l'élément HTML. Dans mon cas, la classe span de l'info-bulle avait déjà un texte fixe, car ma fonction JQuery $('[data-toggle="tooltip"]').prop('title', 'your new title');
ne fonctionnait pas.
Lorsque j'ai supprimé l'attribut title dans la classe span HTML, le jQuery fonctionnait.
Alors:
<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
<span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>
Devrait être codé:
<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
<span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>