使用jquery或javascript（单击）在HTML中设置数据属性作为工具提示

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从其初始更改为“ test ”，如代码片段中的jQuery行所示。

我什至尝试使用$('#main').attr('data-ot', 'test'); 当我检查页面中的元素时，它似乎已更改，但工具提示无法识别更改。 在搜索过程中，我读到data()和attr()不能用于同一个海豚，因为可能存在一些冲突，所以我想这解释了原因...

我真的迷失了这个，有什么想法吗？

Answer 1

根据插件文档，您可以动态设置或更改属性。

您可以添加以下代码：

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

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

另外，您需要从HTML删除data-ot属性。

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

Answer 2

工具提示值是在构建文档时设置的。因此，如果以后进行更改，则不会更改该值。