jquery - 如何在星级插件中制作有效的工具提示插件

Question

我用过这个星级插件。如果将鼠标悬停在每个星形图标上，则会出现默认工具提示。我想使用这个工具提示而不是那个默认的工具提示。我已经放置了所有必要的文件并像这样制作 HTML：

<input class="hover-star tooltip" type="radio" name="rating-1" value="3" title="OK"/>

但是，似乎工具提示无法在该评级插件上工作。我不擅长 javascript。这就是为什么，我不明白我应该在哪里修改以使工具提示正常工作。我该怎么做？这是我的小提琴作品

Answer 1

Rating plugin changes your markup (it adds <a> tag with your title inside). So just adjust your selector like this:

$('.tooltip a').tooltipster({
    interactive: true,
    contentAsHTML: true,
});

See working demo.

Edit: Since <a> tag title is removed by Tooltipster, you can use a little different selector to get tooltip text:

...
focus: function(value, link){
  var tip = $('.hover-test');
  tip[0].data = tip[0].data || tip.html();
  tip.html($(link).parent().attr('aria-label') || 'value: '+value);
},
...

This is not very clean, but should do the job. See updated demo.