Jak zmienić atrybut tytułu elementu za pomocą jQuery

Mam element wejściowy formularza i chcę zmienić jego atrybut tytułu. To musi być łatwe jak ciasto, ale z jakiegoś powodu nie mogę znaleźć, jak to zrobić. Jak to się robi i gdzie i jak powinienem szukać, jak to zrobić?

Zanim napiszemy kod, omówmy różnicę między atrybutami a właściwościami. Atrybuty to ustawienia stosowane do elementów w znacznikach HTML ; przeglądarka następnie analizuje znaczniki i tworzy obiekty DOM różnych typów, które zawierają właściwości zainicjowane wartościami atrybutów. Na obiektach DOM, takich jak proste HTMLElement, prawie zawsze chcesz pracować z jego właściwościami , a nie kolekcją atrybutów .

Obecną najlepszą praktyką jest unikanie pracy z atrybutami, chyba że są one niestandardowe lub nie istnieje równoważna właściwość do ich uzupełnienia. Ponieważ titlerzeczywiście istnieje wiele właściwości odczytu / zapisu HTMLElement, powinniśmy z niego skorzystać.

Możesz przeczytać więcej na temat różnicy między atrybutami i właściwościami tutaj lub tutaj .

Mając to na uwadze, zmanipulujmy, że title...

Uzyskaj lub ustaw titlewłaściwość elementu bez jQuery

Ponieważ titlejest to własność publiczna, możesz ustawić ją na dowolnym elemencie DOM, który ją obsługuje za pomocą zwykłego JavaScript:

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

Wyszukiwanie jest prawie identyczne; nic specjalnego tutaj:

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

To będzie najszybszy sposób zmiany tytułu, jeśli jesteś optymistą, ale ponieważ chciałeś zaangażować jQuery:

Pobierz lub ustaw title właściwość elementu za pomocą jQuery (v1.6 +)

jQuery wprowadził nową metodę w wersji 1.6, aby uzyskać i ustawić właściwości. Aby ustawić titlewłaściwość elementu, użyj:

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

Jeśli chcesz odzyskać tytuł, pomiń drugi parametr i przechwyć zwracaną wartość:

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

Sprawdź prop()dokumentację API dla jQuery.

Jeśli naprawdę nie chcesz używać właściwości lub korzystasz z wersji jQuery wcześniejszej niż 1.6, powinieneś przeczytać:

Uzyskaj lub ustaw title atrybut elementu za pomocą jQuery (wersje <1.6)

Możesz zmienić title atrybut za pomocą następującego kodu:

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

Lub pobierz go za pomocą:

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

Sprawdź attr()dokumentację API dla jQuery.

W modalnych oknach dialogowych interfejsu użytkownika jquery musisz użyć tej konstrukcji:

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

ja wierzę

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

lub

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

powinien załatwić sprawę ...

Myślę, że wszystkie podstawowe funkcje można znaleźć w jQuery Docs , chociaż nie znoszę formatowania.

Inną opcją, jeśli wolisz, byłoby pobranie elementu DOM z obiektu jQuery i użycie na nim standardowych akcesoriów DOM:

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

„Sposób jQuery”, jak wspominają inni, polega na użyciu metody attr (). Zobacz dokumentację API dla attr () tutaj .

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

dla pierwszego tytułu:

jqueryTitle('destroy');

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

Jeśli tworzysz divi próbujesz dodać titledo niego.

Próbować

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

Jako dodatek do odpowiedzi @ Cᴏʀʏ upewnij się, że tytuł podpowiedzi nie został wcześniej ustawiony ręcznie w elemencie HTML. W moim przypadku klasa rozpiętości podpowiedzi miała już stały tekst tytułowy, z tego powodu moja funkcja JQuery $('[data-toggle="tooltip"]').prop('title', 'your new title');nie działała.

Kiedy usunąłem atrybut title w klasie span HTML, jQuery działało.

Więc:

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

Powinien być:

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