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


226

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?

Réponses:


463

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.


5
Si ce n'est pas une réponse bien construite, aucune ne l'est. ET il est aussi précis que bien construit. +1 ... (oh, et aussi votre nom est génial, car c'est le mien :) même orthographié de la même façon!)
VoidKing

@VoidKing: J'ai tendance à revoir et à rendre les réponses actuelles qui deviennent populaires (dont je n'ai que quelques-unes). J'essaie de fournir tout ce que j'espère trouver si je fais des recherches ou poste une question. Je suis content que tu l'aies trouvé!
Cᴏʀʏ

@Cory Eh bien, pour être honnête, je cherchais autre chose (c'était un long plan, mais je cherchais s'il y avait un moyen de styliser la zone de titre HTML par défaut). Je n'ai pas trouvé ce que je cherchais, mais j'ai vraiment admiré l'effort que vous avez mis dans cette réponse (vous avez montré des ressources, des .js et jQuery purs, etc.). Quoi qu'il en soit, belle réponse!
VoidKing

@VoidKing: Ce n'est probablement pas le bon endroit pour répondre, mais si vous parlez des info-bulles par défaut qui apparaissent lorsque vous survolez des éléments avec des attributs alt ou title, alors peut - être que cette réponse vous donnera un aperçu.
Cᴏʀʏ

@Cory Merci, monsieur!
VoidKing du

31

Dans les boîtes de dialogue modales jquery ui, vous devez utiliser cette construction:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

3
Gareautrain !! Lorsque vous utilisez la réponse votée ci-dessus, le titre est modifié une fois, puis le titre ne change pas par la suite À MOINS que vous n'utilisiez l'option de titre dans la boîte de dialogue !! MERCI BEAUCOUP BEAUCOUP!
Ryan Ellis

Je suis content d'avoir lu les commentaires ;-) Si vous devez changer le titre plusieurs fois, vous devez le définir dans les options de dialogue.
Michel

Je n'aurais jamais pensé que cela serait accepté autant de fois. Je suis très heureux que cela ait aidé :-)
Igor L.

15

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.


7

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 .


2
jqueryTitle({
    title: 'New Title'
});

pour le premier titre:

jqueryTitle('destroy');

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


Ce problème peut être résolu en utilisant la bibliothèque jquery elle-même. Vous ne devez vous référer à l'utilisation de bibliothèques tierces que lorsque l'OP le mentionne, ou cela ne peut pas être accompli sans utiliser une bibliothèque tierce.
Avishek

Oui, mais il existe d'autres fonctionnalités. Une solution simple mais agréable ... Vous pouvez examiner ...
Erdi Ertaş

il y aurait une surcharge de transport http de la bibliothèque tierce, qui peut être évitée en utilisant des méthodes stock / natives.
Avishek

de plus, il existe déjà une réponse largement acceptée qui est plus efficace.
Avishek

2

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

Essayer

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

0

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.