javascript - 在输入字段鼠标悬停显示工具提示

Question

当我们将鼠标悬停在任何星星上时，我正在对星星进行评级我想显示工具提示到目前为止我试图喜欢这个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>

Answer 1

您的问题在于输入字段不是您实际悬停的输入字段，而是标签。

这应该可以工作(请注意，我还用 show()/hide() 替换了 fadeIn()/fadeOut()，因为鼠标移动会使淡入淡出动画排队，如果您在星形周围移动鼠标，它会闪烁) .

$(document).ready(function(){ 
  $("label").hover(showBox, hideBox);

  function showBox(e) {
    var x = e.pageX - 80;
    var y = e.pageY + 20;

		$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
    $('#tooltip_block').show();
    $('#tooltip_block').offset({ left: x, top: y });
  }
   
  function hideBox(){
    	$('#tooltip_block').hide();
  }
});

.rating_widgets {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.rating { 
  border: none;
  float: left;
}
.rating > input { display: none; } 
.rating > label:before { 
  font-size: 24px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > .half:before { 
  content: "\f089";
  position: absolute;
  margin-left: 10px;
}
.rating > label { 
  color: #ddd; 
 float: right; 
 margin-left: 10px;
}
.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;
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating_widgets">
	<fieldset class="rating">
		<input type="radio" id="star5" name="rating" value="5"/>
		<label class = "full" for="star5"></label>
		<input type="radio" id="star4half" name="rating" value="4.5" />
		<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.5" />
		<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.5" />
		<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.5" />
		<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="0.5" />
		<label class="half" for="starhalf"></label>
	</fieldset>
</div>
<div id="tooltip_block">
	<div class="top_bar"><span class="rating_value"></span> stars out of 5 stars</div>
</div>

编辑

这是将值插入悬停框的代码

$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());

如果您想摆脱它们，请删除那行 javascript(您可能应该删除

<span class="rating_value"></span>

然后从悬停 div 开始，因为如果没有那一点 js，它就没有用。

编辑 #2

至于悬停出现在星星之间 - 我更新了你的 CSS。问题是你在设置

.rating > label:before {
    margin: 5px;
    ...
}

这有效地使显示您的星星的元素彼此紧靠在一起。你可以使用

.rating > label { 
    ...
    margin-left: 10px;
}

.rating > .half:before { 
    ...
    margin-left: 10px;
}

而是在标签元素周围创建边距