如何在突出显示的文本部分上定位弹出框? [英] How to position popover over a highlighted portion of text?
本文介绍了如何在突出显示的文本部分上定位弹出框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设有文本正文的这种情况.并且，在突出显示其中的一个单词时，我想要一个弹出框显示，工具提示位于突出显示的单词处.
Assume this scenario where there is a body of text. And, on highlighting a word from it, I want a popover to show up with the tooltip positioned at the highlighted word.
有点像 mac 如何显示如下单词的定义 -
Kind of like how mac shows definitions of words like below -
这是一个 angularjs 应用程序，正在使用 angularui.因此，一个以 ui 角度为重点的解决方案是可取的，但不是必需的.
It's an angularjs application, and am using angularui. So, an angular ui focussed solution would be preferable but not necessary.
提前致谢.
推荐答案
您可以使用以下代码来做您想做的事...祝您好运:
You can use following code to get do what you want to do... Good Luck:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
text = document.selection.createRange().text;
}
return text;
}
function doSomethingWithSelectedText() {
var selectedText = getSelectedText();
if (selectedText) {
$('#infoDiv').css('display', 'block');
$('#infoDiv').css('position', 'absolute');
$('#infoDiv').css('left', event.clientX + 10);
$('#infoDiv').css('top', event.clientY + 15);
} else {
$('#infoDiv').css('display', 'none');
};
};
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
</script>
<style>
/*Tooltip div styling */
.tooltipDiv {
display: none;
width: 250px;
z-index: 101;
background-color: #fff;
border: 3px solid #666;
padding: 12px 12px 12px 12px;
border-radius: 0px 25px 0px 25px;
}
</style>
</head>
<body>
<div id="infoDiv" class="tooltipDiv">This is where your will put whatever you like...</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>这篇关于如何在突出显示的文本部分上定位弹出框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
