Stars hover option

[mrroot5]

Hello @dreyescat ,

I am trying to show a tooltip (bootstrap) on hover but I can't do that. Have you any solution please?

Regards.

[dreyescat]

Thanks for your suggestion! It sounds like a good idea.

I don't want to couple the rating widget with the tooltip one. So I have added a callback to give more control over the rating symbols. See Getting more control over the symbols for more info.

Also I have updated the demo page to show the tooltip functionality in action.

Hope it meets your needs.

[mrroot5]

Great, thank you :). I do it with this piece of code but your option is better, thanks.

bootstrap-rating.js - line 73 (aprox) var rateTooltip = opts.start; for (var i = 0; i < rateToIndex(opts.stop); i++) { $rating.append('

'); rateTooltip++; }

[mrroot5]

@dreyescat I saw a bug in your tooltip. You can check my testing website to saw it in realtime :). http://adriangarrido.com.es/test/apps/rating/

Inside "¿Pregunta número 1?" (Rating 0-5) The tooltip with a 0 value never was displayed.

[dreyescat]

I see... Well, actually it would not really be a bug in the bootstrap-rating plugin but in the bootstrap tooltip plugin. I think I have spotted the problem in the bootstrap tooltip plugin, specifically in their show method:

Tooltip.prototype.show = function () {
  var e = $.Event('show.bs.' + this.type)

  if (this.hasContent() && this.enabled) {
    this.$element.trigger(e)

https://github.com/twbs/bootstrap/blob/master/js/tooltip.js#L149-L153

The tooltip is shown only if this.hasContent() && this.enabled expression evaluates to true. If you look into what this.hasContent() returns:

Tooltip.prototype.hasContent = function () {
  return this.getTitle()
}

https://github.com/twbs/bootstrap/blob/master/js/tooltip.js#L326-L328

You'll see it returns the title you provided in the tooltip initialization. In your case the rates. So, when a rate of 0 is provided. Voilà! A 0 is returned from getTitle and hence this.hasContent() evaluates to false in the if (this.hasContent() && this.enabled) statement. Consequently, no tooltip is shown for the 0 rate.

You can overcome this issue converting the rate into a string instead of a number. Applied to your specific case, concatenating the rate to an empty string would suffice '' + rate:

$('#rating').rating({
    start: 0,
    stop: 6,
    extendSymbol: function (rate) {
        console.log(rate);
        $(this).tooltip({
          placement: 'bottom',
          title: '' + rate
        });
      }
});

Also, if you want to get rid of the annoying square you get between the label and the rating, you can specify the container: 'body' option in the tooltip initialization:

$('#rating').rating({
    start: 0,
    stop: 6,
    extendSymbol: function (rate) {
        console.log(rate);
        $(this).tooltip({
          container: 'body',
          placement: 'bottom',
          title: '' + rate
        });
      }
});

[mrroot5]

Wow, perfect. Thank you very much. I love this plugin :P.