需要通过悬停在星级哟插件工具提示

我目前使用率哟插件审查系统在我的项目。我可以成功添加这个小部件。需要通过悬停在星级哟插件工具提示

问题是，当我悬停在审查星星上我能够得到我选择的星星数量，但我希望在工具提示而不是星星以下。

这里是代码片段，也是文档是here，你可以看到它悬停在文档站点的工具提示工作。

$(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>

任何帮助将不胜感激。

来源

2017-07-25 Shyam Shingadiya

可能是这可以帮助。 [tooltip-message-on-hover-using-jquery]（https://stackoverflow.com/questions/1333546/how-can-i-display-a-tooltip-message-on-hover-using-jquery） –

谢谢你@ankitsuthar：我已经添加了bootstrap，我也可以使用bootstrap tooltip来做到这一点，但是当我添加bootstrap tooltip时，每次更改都会弹出，所以我只想使用该插件的工具提示。 –

请检查，这是一个CSS问题。我添加一个额外的div和一些CSS。可能这是有帮助的。

$(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; 
 
\t display:none; 
 
    line-height: 12px; 
 
\t 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>

来源

2017-07-25 08:47:43

谢谢，它的工作原理。 –

需要通过悬停在星级哟插件工具提示

回答

相关问题