Набор данных атрибутов в HTML с JQuery или JavaScript (на клик) для всплывающей подсказки

Question

У меня есть следующие JQuery, CSS и HTML линии:

$("#button").click(function(){ 
 
    $("#main").data("ot", "test"); 
 
});

#main { 
 
    display: inline-block; 
 
    background-color: red; 
 
    padding: 4px; 
 
    width: 230px; 
 
    text-align: center; 
 
} 
 
#button { 
 
    display: inline-block; 
 
    padding: 4px; 
 
    background-color: green; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main" data-ot="tooltip content" data-ot-delay="0">Div Content (Tooltip Trigger)</div> 
 
<div id="button">Change data-ot to test</div>

OBS: атрибут HTML data-ot - это то, где всплывающая подсказка получает контент от ...

То, что я пытаюсь сделать, это изменить атрибут data-ot от его начального до «теста», как показано в JQuery линий сниппета.

Я даже пытался использовать $('#main').attr('data-ot', 'test');, и когда я проверяю элемент на странице, он, похоже, изменился, но всплывающая подсказка не распознает изменение. Во время моих поисков я читал, что data() и attr() не должны использоваться вместе для одной и той же свиньи, потому что могут быть некоторые конфликты, поэтому я думаю, что это объясняет, почему ...

Я действительно потерял это, любые идеи?

Answer 1

В соответствии с плагином documentation вы можете динамически устанавливать или изменять динамические параметры.

Вы можете добавить этот код:

var myOpentip = new Opentip($("#main")); 
myOpentip.setContent("First Content"); 

$("#button").click(function() { 
    myOpentip.setContent("New content"); 
}); 

Кроме того, необходимо удалить атрибут данных, ВЗ из HTML.

JSFIddle: https://jsfiddle.net/kalimahapps/gu8tu2ev/1/

Answer 2

Значение подсказки устанавливается при создании документа. Если вы измените его позже, это не изменит значение.