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.
Kind of like how mac shows definitions of words like below -
It's an angularjs application, and am using angularui. So, an angular ui focussed solution would be preferable but not necessary.
Thanks in advance.
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.
Kind of like how mac shows definitions of words like below -
It's an angularjs application, and am using angularui. So, an angular ui focussed solution would be preferable but not necessary.
Thanks in advance.
Share Improve this question asked Jan 30, 2015 at 23:51 sanzsanz 1,0691 gold badge10 silver badges27 bronze badges 3- ui.bootstrap.popover might be helpful. – showdev Commented Jan 30, 2015 at 23:57
- @showdev Have used that and got popovers to work over an element with custom triggers and everything. But, to have the tooltip position itself over a highlighted text section does not seem possible (I would like to believe possible but not trivial). – sanz Commented Jan 30, 2015 at 23:58
- I see. Would you mind adding the code of your attempt to your question so that we can reproduce the issue? It might help us visualize your problem and find a solution. – showdev Commented Jan 31, 2015 at 0:00
1 Answer
Reset to default 11You can use following code to get do what you want to do... Good Luck:
<html>
<head>
<script src="https://ajax.googleapis./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>