Comment changer l'attribut title d'un élément à l'aide de jQuery

J'ai un élément d'entrée de formulaire et je veux changer son attribut title. Cela doit être facile comme bonjour, mais pour une raison quelconque, je ne trouve pas comment faire cela. Comment cela se fait-il, et où et comment dois-je chercher comment le faire?

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 titleexiste en effet une propriété de lecture / écriture sur de nombreux HTMLElements, 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...

Obtenir ou définir la titlepropriété d' un élément sans jQuery

Étant donné qu'il titles'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:

Obtenir ou définir la 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 titleproprié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:

Obtenir ou définir l' 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');

https://github.com/ertaserdi/jQuery-Title

Si vous créez un divet essayez d'y ajouter un title.

Essayer

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

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>