我试图在用户选择一些文字后显示工具提示。客户选择文本后,我将弹出窗口放在选定文本附近,因为我使用此功能,我错了x
和y
位置..任何帮助?
$(document).ready(function(){
$('.document').click(function(e) {
if(getSelectedText() !="") { //checking user selected some text?
var x = e.pageX;
var y = e.pageY;
$(".savetooltipAll").css("top",y); //wrong not near to text selection
$(".savetooltipAll").css("left",x); //wong not near to text selection
$(".savetooltipAll").show();
} else {
$(".savetooltipAll").hide();
}
})
});
答案 0 :(得分:1)
快速制作了这个版本。 需要更改/优化定位以适合您的HTML代码和需求。
Jsfiddle: http://jsfiddle.net/j5jzaa5e/
$(document).ready(function(){
$('body').mouseup(function(e) {
// Get the selection range
var range = window.getSelection().getRangeAt(0);
// Check if text was actually selected
if (!range.collapsed) {
// Get bounds & set tooltip pos
var bounds = range.getBoundingClientRect();
var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();
$(".savetooltipAll").css("top", y + 'px');
$(".savetooltipAll").css("left",x + 'px');
$(".savetooltipAll").show();
} else {
$(".savetooltipAll").hide();
}
})
});
答案 1 :(得分:0)
检查两件事:
您必须在css文件中定义工具提示的位置。
.savetooltipAll {
position: absolute;
}
类savetooltipAll
的元素应该是正文的直接子元素(以避免位置上下文):
<body>
<div class="savetooltipAll"></div>
<ul>
<li class="document">
</li>
<li class="document">
</li>