Generate a dynamic tooltip for a specific element

My goal is to display a tooltip when a user selects specific text on the page - similar to annotating text.

I have successfully created a v-tooltip component dynamically. I managed to select the element in JavaScript, but I am struggling to wrap it with the v-tooltip component. When I did manage to wrap it, the tooltip ended up positioned at the top of the page rather than on the selected element itself. I am questioning whether my approach is the most effective one.

You can view an example on JSFiddle: https://jsfiddle.net/6xk7zLv9/

Is there a better method for generating Vue components dynamically and inserting them into the DOM? How can I properly attach the tooltip to the selected element?

javascriptvue.jsvuetify.jstooltipdynamically-generated

Answer №1

To display the tooltip correctly, make sure to specify a side prop (top/bottom/left/right).

If you prefer not to use the activator slot, you can utilize the position-x and position-y props to position it as desired without altering the DOM elements: https://codepen.io/kaelwd/pen/LYWLxVe?editors=1010

Retrieve the position of the current selection using 

window.getSelection().getRangeAt(0).getBoundingClientRect()
: https://codepen.io/kaelwd/pen/poewRaE?editors=1010
For a more advanced feature, consider using getClientRects instead to make the tooltip track the end of the selection: https://codepen.io/kaelwd/pen/vYxZgjb?editors=1010

Useful resources for working with selections: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection, https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt, https://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery mobile button may occasionally appear selected without triggering a page transition

When using a Phonegap Application with jQuery mobile, I have encountered an issue where clicking a button sometimes only selects it and does not transition to the next page. This even happens with the back buttons generated automatically by the library, re ...

javascriptjqueryjquery-mobilecordova

"Combining Arrays in Vuex Getters: A Step-by-Step

Is there a way to efficiently update a concatenated array in vuex getters without requiring a hard browser refresh? const state = () => ({ array1 : [{'key1':'value1'}], array2 : [{'key2':'value2'}, {'ke ...

vue.jsvuejs2vuex

Using Jest functions as object properties results in undefined behavior

I am faced with a challenge in my class where I need to mock an object along with its properties intercept(context: ExecutionContext) { const response = contect.switchToHttp().getResponse() // the chain that needs to be mocked if (response.headersSent ...

javascripttypescriptunit-testingtestingjestjs

Retrieve information from MariaDB using nodejs and transmit it to an html document (Express JS)

To create a calendar with activities, I am retrieving data from a local Maria database and populating an HTML table. My approach involves using Express JS to direct users to a designated HTML page. Here is how my file structure looks like: NODE | |- app ...

javascriptmysqlnode.jsexpressmariadb

Having issues with json_decode not functioning correctly after using JSON stringify

After encoding a JavaScript array into JSON and posting it to PHP, I encountered an issue. Before posting the data, when I checked a value in the array using console.log(selection[878][2824]), I received the expected result. However, after encoding the var ...

javascriptphpjqueryjson

jQuery validation does not work properly when using .element(element) in a custom method

I am struggling with a custom rule that is supposed to check dependencies by validating other inputs it relies on. However, when I implement this validation, it seems like all other validations are being ignored. Here is my custom validation rule: jQuery ...

javascriptjqueryvalidationjquery-validate

What are the steps to set up auto-building with create-react-app?

I've been utilizing create-react-app for some time now. Autoreloading with 'npm start' or 'yarn start' has been working well on its own, but now I'm facing another issue. Currently, I am running the app on an Express server th ...

javascriptnode.jsreactjsexpresscreate-react-app

Angular index.html file can include a conditional script

I am currently working on an Angular project, where the index.html serves as the main entry point for the application, just like in any other Angular project. This file contains important links and configurations. Within the HTML code snippet below, you w ...

javascripthtmlangulartypescriptgoogle-tag-manager

Tips for fixing the "500 (Internal Server Error)" issue in Laravel with ajax

When utilizing AJAX to fetch route data, I encountered an issue. I aim to create a Dynamic Select that, based on the selected "Faculty," displays the corresponding "programs" linked to that faculty. This is my route: Route::get('selectprogramas/{id ...

javascriptajaxlaravel

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

What causes the active slide number to remain the same in Swiper JS pagination when using fractions?

I have been working on setting up an .image-slider__fraction block to display the active slide number out of the total number of slides. However, I am encountering an error in the JavaScript that says "Uncaught ReferenceError: myImageSLider is not defined" ...

javascripthtmljquerycssswiper.js

Error: The component passed is invalid and cannot be defined within kendo UI

Check out this example https://www.telerik.com/kendo-vue-ui/components/grid/ showcasing a computed method gridSearchMessage() { return provideLocalizationService(this).toLanguageString( "gridSearch", "Search in all colu ...

javascriptvue.jskendo-uikendo-gridvue-composition-api

What is the best way to create a jumping animation for an object in Cannon.js and Three.js?

During my quest for a solution, I came across a common practice where users used cannonBody.velocity.y = JUMP_VELOCITY to make an object jump. However, in my scenario, this method only worked while the object was already in motion and not when it was stat ...

javascripttypescriptthree.jscannon.js

In React, the ES6 prototype method map failed to render anything on the screen

Is there an issue with my map method implementation? var App = React.createClass({ getInitialState(){ return { items:[1,2,3] } }, renderItem(){ return( this.state.items.map((item,i))=> <li key={i}> { ...

javascriptreactjs

NodeJs ERROR: Module not found

When trying to launch an instance running ubuntu with express, I encountered a module not found error that does not occur on my Windows machine. Error Message: node:internal/modules/cjs/loader:1085 throw err; ^ Error: Cannot find module './src/c ...

javascriptnode.jsexpressubuntu

Guide on how to use JavaScript to make an HTML5 input field mandatory

I am facing an issue with setting input fields as required based on radio button selection in a form. Initially, all fields should have required=false, but I'm unable to achieve this. No matter what value I assign to the required attribute, it always ...

javascripthtmlrequired

How to navigate to the next page in Vue form submission in Laravel

Currently, I am utilizing both Laravel and Vue to create a form that should redirect to another page upon submission. However, the issue lies in the fact that after submission, the form refreshes and returns to the same page instead of redirecting to the s ...

laravelvue.jslaravel-5

Adjusting the value of a user form with multidata in PHP and Javascript

I am looking for guidance on how to modify the value of an input in a form that contains multiple data entries. Here is my form: <form method="post" action="pax-flight.php#pax-flight" class="paxform"> <input type="hidden" value="{"data":{"us ...

javascriptphpajax

Working effectively with Django template variables and JavaScript

Can someone assist me with this issue I am having in my code? I have a Django template variable {% clients_list %} I need to populate multiple select boxes with the same prefixes. This is the code snippet I currently have: $(document).ready(function ...

javascriptdjangodjango-templates

How to effectively utilize multiple Vue instances in your project?

My inquiry is somewhat linked to a similar question on Stack Overflow, but I am uncertain about the level of discouragement towards the approach discussed in relation to Vue. In my situation, I am working on a project where the DOM is generated entirely b ...

javascriptvue.jsvuejs2components