0

I've used this star rating plugin. There is appearing a default tooltip if hovering on the each star icon. I want use this tooltip instead of that default tooltip. I've put all the necessary files and make the HTML like this way:

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

But, it seems that tooltip can't working at that rating plugin. I am not good at javascript. That's why, I don't understand at where should I modify to make the tooltip working. How can I do it? Here is my fiddle work

user1896653
  • 3,247
  • 14
  • 49
  • 93

1 Answers1

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.

Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49