Imagine a situation where a body of text is present. When a word is highlighted within this text, a popover should appear with a tooltip positioned directly at the highlighted word.
Think of it as similar to how a Mac displays definitions of words within a document.
The application in question is built using AngularJS and utilizes AngularUI. While a solution focused on AngularUI is preferred, it is not a strict requirement.
Thank you in advance.
Below is the code snippet that can help you achieve your desired outcome. Best of 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 you can customize the content as per your requirement...</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>Is there an alternative method to change the app language without refreshing the entire page? The code snippet below always refreshes the page, leading to a poor user experience. window.location.search = "sap-language=EN"; The following code snippet is a ...
I recently encountered an issue while working on a website project. I was trying to create an img element using JavaScript, but ran into a problem when I tried to add the src attribute and then use the appendChild function. I'm unsure if I am missing ...
Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...
I'm interested in developing a translator within my LiveCode app that can translate any text. I attempted to integrate Google Translate, but it didn't work as expected. Thank you! ...
By utilizing a basic CSS animation, I've managed to create a fade-in effect that relies on opacity. To kickstart the animation, I use JavaScript to ensure it waits until the browser finishes loading. While this method works seamlessly on Firefox and C ...
As I delve into learning node.js, I decided to start with a basic example in a file named server.js: var http = require("http"); function onRequest(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("it&a ...
Currently facing an issue when trying to remove query string arrays from the URL. The URL in question looks like this - In Chrome, it appears as follows - Var url = "http://mywebsite.com/innovation?agenda%5B%5D=4995&agenda%5B%5D=4993#ideaResult"; ...
I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...
I am looking to create an empty data class in JavaScript that can later be filled with JSON data. In C#, I would typically do something like this: class Person { string name; int age; Person[] children; var whatever; } However, when I try ...
How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image? I have a couple of questions: How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doe ...
Currently, I am working with asp.net and c#.net to develop a website. My goal is to create a content navigation system similar to what Microsoft has implemented on their Windows website: Microsoft Windows On this link, users can navigate through page cont ...
I have a project involving managing email responses, where the reply function includes pre-written content like Re: ${Subject of the email} The issue I'm facing is that after the 2nd reply, there is a repeated Re: , so I created a function to remove ...
I am facing an issue with a grid view and update panel where I have set up an image loader to display when the post back occurs. However, whenever I click on a button in row 5, all the loaders show up at once instead of just the one near the button clicked ...
My node.js and express.js application hosts a REST API at http://localhost:3000/api/kfc, providing JSON data. The route function looks like this: router.get('/kfc', function(req, res, next) { var response= { "id":"123", "name":"name1", "drink": ...
I am facing an issue with populating two separate selects in my view with different arrays. Can anyone guide me on how to pass two distinct JSON objects using res.render? I have attempted the method below without success. const result1 = {data1: "val ...
I am working with an element that I want to display in the middle of the page using a for cycle so it can be populated with the correct information. This particular element is hidden but should appear on hover. However, it doesn't look very aesthetica ...
I have a DIV that is displaying correctly. However, content that is supposed to be below the DIV is showing on top of it. I need help fixing this issue. I have tried the solutions provided in other similar questions but none of them have resolved my proble ...
Trying to extract frames from a video using Angular has been quite challenging for me. While browsing through Stack Overflow, I came across this helpful post here. I attempted to implement the first solution suggested in the post, but unfortunately, I was ...
I currently have a textbox that displays the datepicker when clicked. However, there is now a requirement to add a calendar icon inside the textbox. The datepicker should be displayed when either the calendar icon or the textbox is clicked. Below is the co ...
Here is the code snippet: import React, { useEffect, useRef, useState } from "react"; import * as Highcharts from "highcharts"; import HighchartsReact from "highcharts-react-official"; export const PieChart = (props: any) =&g ...