在 Rate Yo 插件中悬停在星星上需要工具提示
Need tooltip by hover on stars in Rate Yo plugin
我目前在我的项目中使用 rate-yo 插件作为评论系统。我可以成功添加这个小部件。
问题是,当我将鼠标悬停在评论星上时,我可以获得我选择的星数,但我希望它显示在工具提示中而不是星下。
这是代码片段,还有文档 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>
如有任何帮助,我们将不胜感激。
请检查,这是一个 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;
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>
我目前在我的项目中使用 rate-yo 插件作为评论系统。我可以成功添加这个小部件。
问题是,当我将鼠标悬停在评论星上时,我可以获得我选择的星数,但我希望它显示在工具提示中而不是星下。
这是代码片段,还有文档 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>
如有任何帮助,我们将不胜感激。
请检查,这是一个 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;
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>