当我鼠标悬停在jQuery工具提示上时,它会在我试图关闭的一个名为 ui-helper-hidden-accessible
的元素中创建新的子div,但是有些div被赋予了一种风格display: none
和其他人实际显示在页面底部。
$(document).tooltip({
tooltipClass: "popup",
items: ".fa-question-circle",
position: {
my: "center bottom-15",
at: "center top",
collision: 'none',
close: function(event, ui) {
$(".ui-helper-hidden-accessible").remove();
},
},
hide: false
});
<p class="score__title">Student-teacher ratio <i class="fa fa-question-circle tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam gravida molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras tempor nisi ac ligula molestie commodo. Sed varius magna at justo rutrum, et faucibus sapien cursus." aria-hidden="true"></i></p>
答案 0 :(得分:1)
我在代码中发现了一些语法错误。清理完毕后进行测试似乎有效。
示例:https://jsfiddle.net/Twisty/17sj6Lj5/
<强> HTML 强>
<h1>
Widget
</h1>
<hr />
<div>
<p class="score__title">Student-teacher ratio <i class="ui-icon ui-icon-help fa fa-question-circle tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam gravida molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras tempor nisi ac ligula molestie commodo. Sed varius magna at justo rutrum, et faucibus sapien cursus."
aria-hidden="true"></i></p>
</div>
<强> CSS 强>
.fa-question-circle {
background-color: #000;
border-radius: 50%;
}
.ui-icon {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png)
}
<强>的JavaScript 强>
$(function() {
$(document).tooltip({
tooltipClass: "popup",
items: ".fa-question-circle",
position: {
my: "center bottom-15",
at: "center top",
collision: "none"
},
close: function(event, ui) {
$(".ui-helper-hidden-accessible").remove();
},
hide: false
});
});
您尚未正确关闭position
。这意味着close
和hide
未被阅读。