So ändern Sie das title-Attribut eines Elements mit jQuery

Ich habe ein Formulareingabeelement und möchte dessen title-Attribut ändern. Das muss ganz einfach sein, aber aus irgendeinem Grund kann ich nicht finden, wie das geht. Wie wird das gemacht und wo und wie soll ich suchen, wie das geht?

Bevor wir Code schreiben, wollen wir den Unterschied zwischen Attributen und Eigenschaften diskutieren. Attribute sind die Einstellungen, die Sie auf Elemente in Ihrem HTML-Markup anwenden . Der Browser analysiert dann das Markup und erstellt DOM-Objekte verschiedener Typen, die Eigenschaften enthalten, die mit den Werten der Attribute initialisiert wurden. Bei DOM-Objekten, z. B. einem einfachen HTMLElement, möchten Sie fast immer mit seinen Eigenschaften arbeiten , nicht mit seiner Attributsammlung .

Die derzeitige bewährte Methode besteht darin, die Arbeit mit Attributen zu vermeiden, es sei denn, sie sind benutzerdefiniert oder es gibt keine gleichwertige Eigenschaft, um sie zu ergänzen. Da titlein der Tat als eine Lese- / Schreib existiert Eigenschaft auf vielen HTMLElements, sollten wir sie nutzen.

Weitere Informationen zum Unterschied zwischen Attributen und Eigenschaften finden Sie hier oder hier .

Lassen Sie uns in diesem Sinne das manipulieren title...

Abrufen oder Festlegen der titleEigenschaft eines Elements ohne jQuery

Da titlees sich um eine öffentliche Eigenschaft handelt, können Sie sie für jedes DOM-Element festlegen, das sie mit einfachem JavaScript unterstützt:

document.getElementById('yourElementId').title = 'your new title';

Das Abrufen ist fast identisch; nichts besonderes hier:

var elementTitle = document.getElementById('yourElementId').title;

Dies ist der schnellste Weg, um den Titel zu ändern, wenn Sie eine Optimierungsnuss sind, aber da Sie jQuery einbeziehen wollten:

Abrufen oder Festlegen der title Eigenschaft eines Elements mit jQuery (v1.6 +)

jQuery hat in Version 1.6 eine neue Methode zum Abrufen und Festlegen von Eigenschaften eingeführt. titleVerwenden Sie zum Festlegen der Eigenschaft für ein Element:

$('#yourElementId').prop('title', 'your new title');

Wenn Sie den Titel abrufen möchten, lassen Sie den zweiten Parameter weg und erfassen Sie den Rückgabewert:

var elementTitle = $('#yourElementId').prop('title');

Lesen Sie die prop()API-Dokumentation zu jQuery.

Wenn Sie wirklich keine Eigenschaften verwenden möchten oder eine Version von jQuery vor Version 1.6 verwenden, sollten Sie weiterlesen:

Abrufen oder Festlegen des title Attributs eines Elements mit jQuery (Versionen <1.6)

Sie können das title Attribut mit dem folgenden Code ändern :

$('#yourElementId').attr('title', 'your new title');

Oder rufen Sie es ab mit:

var elementTitle = $('#yourElementId').attr('title');

Lesen Sie die attr()API-Dokumentation zu jQuery.

In jquery ui modalen Dialogen müssen Sie dieses Konstrukt verwenden:

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

Ich glaube

$("#myElement").attr("title", "new title value")

oder

$("#myElement").prop("title", "new title value")

sollte den Trick machen ...

Ich denke, Sie können alle Kernfunktionen in den jQuery-Dokumenten finden , obwohl ich die Formatierung hasse.

Wenn Sie möchten, können Sie auch das DOM-Element aus dem jQuery-Objekt abrufen und Standard-DOM-Accessoren verwenden:

$("#myElement")[0].title = "new title value";

Der "jQuery-Weg", wie von anderen erwähnt, ist die Verwendung der attr () -Methode. Siehe die API-Dokumentation für attr () hier .

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

für den ersten Titel:

jqueryTitle('destroy');

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

Wenn Sie ein erstellen divund versuchen, ein hinzuzufügen title.

Versuchen

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

Stellen Sie als Ergänzung zu @ Cᴏʀʏ answer sicher, dass der Titel des Tooltips im HTML-Element noch nicht manuell festgelegt wurde. In meinem Fall hatte die span-Klasse für den Tooltip bereits einen festen Text, daher funktionierte meine JQuery-Funktion $('[data-toggle="tooltip"]').prop('title', 'your new title');nicht.

Als ich das title-Attribut in der HTML-Span-Klasse entfernte, funktionierte die jQuery.

So:

<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>

Sollte folgen:

<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>