1
スターの上にカーソルを置いたときに評価の星を表示しています。これまでのところツールチップを表示したいのですが、これを試しました。jqueryに問題があります。そのクラスを書く方法を考えていない。私は入力タイプのラジオを使用し、どのようにjqueryでこの属性をロードするのでしょうかというラベルを誰も私にその機能を達成するように提案できます。あなたの問題は、入力フィールドは、あなたが実際にホバリングしているものではありません、それはラベルだという事実である事前に入力フィールド上でマウスのホバー表示のツールチップ
おかげで...
$(document).ready(function() {
$("input[name=rating]").on('mouseenter', showBox);
$("input[name=rating]").on('mouseleave', hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block').fadeIn();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox() {
$('#tooltip_block').fadeOut();
}
});.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked) {
color: #FFD700;
}
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" />
<label class="full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class="full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class="full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class="full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class="full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="half" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar">4.2 stars out of 5 stars</div>
</div>
ホバーはまた、私は削除する方法[値] 'したくないラベル要素の周りに余白を作成するために使用することができます。 – Husna
私は星の真ん中にマウスを置いてもツールチップを取得しますが、スターのツールチップにホバーを正確に表示したいと思っています。 – Husna
@husnaあなたのホバーボックスに値を追加する行についての情報を追加しました – Kristaps