Need tooltip by hover on stars in Rate Yo plugin

Question

I am currently using rate-yo plugin for review system in my project. I can able to add this widget successfully.

The problem is when I hover on review stars I able to get number of stars I chosed, But I want that in tooltip instead of below stars.

Here is snippet and also documentation is here, you can see on hover its working with tooltip in documentation site.

$(function () {
$("#rateYo").rateYo({
    precision: 2,
    onChange: function (rating, rateYoInstance) {
      $(this).next().text(rating);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>


<div id="rateYo"></div>
<div class="counter"></div>

Any help will be appreciated.

may be this can help. [tooltip-message-on-hover-using-jquery](https://stackoverflow.com/questions/1333546/how-can-i-display-a-tooltip-message-on-hover-using-jquery) — always-a-learner, Jul 25 '17 at 08:38
Thank you @ankitsuthar : I have added bootstrap and I can do it with bootstrap tooltip also, But when I add bootstrap tooltip get flick on every change, So I want to use that plugin's tooltip only. — Alex Mac, Jul 25 '17 at 08:42

score 1 · Accepted Answer · answered Jul 25 '17 at 08:47

Please check, this is a css issue. I add a extra div and some css. May be this is helpful.

$(function () {
$("#rateYo").rateYo({
    precision: 2,
    onChange: function (rating, rateYoInstance) {
      $(this).next().text(rating);
    }
  });
});

.pos_rel{position:relative; float:left;}
.counter {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 15px;
    height: 20px;
 display:none;
    line-height: 12px;
 text-align:center;
    margin-top: -10px;
    min-width: 20px;
    padding: 5px;
    position: absolute;
    right: -36px;
    top: 50%;
}

.pos_rel:hover .counter{display:block;}

  
.counter:before {
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    content: "";
    display: block;
    height: 0;
    left: -10px;
    margin-top: -5px;
    position: relative;
    top: 50%;
    width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<div class="pos_rel">

<div id="rateYo"></div>
<div class="counter"></div>
</div>

Need tooltip by hover on stars in Rate Yo plugin

1 Answers1