Is there a way to make a text area move along with the mouse cursor?

I have been working on my first website and everything is running smoothly so far. However, I have a new idea that I am struggling to implement. Some of the pages on my site feature a video player with buttons to select different videos. When a viewer hovers their mouse over a button, I want a popup text area to appear above the button, providing a description of the video.

I have searched for a solution to make the popup text appear above the button the mouse is hovering over, to prevent the viewer's eyes from moving back and forth. The only thing I have found so far is using a <span> title property to create a simple mouseover tooltip. If you have any guidance or tips on how to achieve this effect, I would greatly appreciate it!

javascriptjqueryhtmlcss

Answer №1

Give this a shot :

$(document).on("mousemove",function(e){

    $(".moveTxt").css({top:e.pageY,left:e.pageX});

})

Here is the revised code :

<!DOCTYPE html>
<html lang="en>
<head>
    <style>
        .moveTxt {
            position: relative;
            background-color: yellow;
            display: inline-block;
            border: 1px solid red;
        }
    </style>
</head>
    
    <body>
        
        <div class="moveTxt">This is a Text</div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).on("mousemove",function(e){

            $(".moveTxt").css({top:e.pageY,left:e.pageX});

        })
        
        </script>
    </body>
</html>

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

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

Vue-router is failing to display child routes in the application

I have an object within the Vue router that specifies a path for books and their details. { path: "/books", name: "books", component: Books, children: [ { path: ":id", name: "books.detail", ...

javascriptvue.jsvue-routernested-routes

Having trouble displaying child nodes in MatTreeView with Angular 14?

In an Angular project, I am attempting to display a private group's data from GitLab (utilizing a public one for testing purposes). To achieve this, I have implemented the NestedTreeView component. While the parent nodes are displaying correctly, I am ...

javascriptangulartypescriptangular-material

Adjust the height of images to be consistent

I'm currently working on creating a grid layout with 4 images in a row using DaisyUI card component. However, I've run into an issue where there is white space at the bottom of some images due to varying image heights. Is there a solution that wo ...

javascripthtmlcssfrontendtailwind-css

What is the best .scss file to use for updating the site?

Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about ...

csssassbootstrap-4

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

I am looking to create a functional stateless component in ReactJs following the guidelines outlined here. const MyBlueButton = props => { const styles = { background: 'blue', color: 'white' }; return <button {...props} sty ...

cssreactjsmaterial-uijsx

React - onchange event for input checkboxes does not trigger on the initial click

The behavior of a checkbox input is proving to be quite unreliable. Currently, I am setting the checkbox state based on the store's state, which generally works well. However, there are instances where checking the checkbox does not trigger the oncha ...

javascriptreactjsnext.js

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

htmlcssscrollscrollbar

Keep rolling the dice until you hit the target number

Currently, I am in the process of learning JavaScript and one of my projects involves creating a webpage that features two dice images, an input box, and a button. The objective is for users to input a value, click the button, and then see how many rolls i ...

javascriptjqueryhtml

Node.js program experiences issues with incorporating netCDF files

I am attempting to encode a NetCDF file within my Node.js program using the netcdf library, which can be found at https://www.npmjs.com/package/netcdf. After running the program, I encountered the following error: C:\app [master +2 ~1 -0 !]> npm ...

javascriptnode.jsnpmnetcdf

Position the text in the center of a graph within a grid cell by utilizing dash and plotly

Is there a way to center text over a graph within a cell of a grid table using dash and plotly? I'm struggling with the alignment currently, as the graph is not centered while the text appears centered in the view but not in the cell itself. You can ...

pythoncssgridplotly-dash

The collapsible menu located beneath my navigation bar is unable to reach the correct position on the right side

I'm attempting to create a collapsible navigation bar with its contents shifting to the right side when resized to medium size, but I'm having trouble. Can someone please assist me with this? I have also included the code below. <nav class=&qu ...

htmlcssbootstrap-5

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

cssjavafxfontsitalic

The component <FormControl /> does not support the variant prop

It's perplexing to me why <FormControl /> doesn't seem to accept the prop variant. Even though the documentation suggests that this prop is available. import React from "react"; import { render } from "react-dom"; import FormControl from " ...

javascriptreactjsmaterial-ui

Looking for a way to convert time zones using jQuery?

I am primarily interested in the continental U.S. time zones (Pacific, Mountain, Central, and Eastern), with a bonus for including others as well. My question is whether there is a jQuery function available that can handle daylight saving time adjustments ...

jqueryalgorithmdatetimetimezone

How can I effectively implement a withAuth higher order component (HOC) in TypeScript within Next.js?

Currently, I am working on a Next.js application and implementing the next-auth package. My goal is to develop a Higher Order Component (HOC) that can determine if the component has an active session or not. Along with this, I am utilizing eslint for code ...

javascriptreactjstypescriptnext.js

What causes the variable assigned in the outer subscription's scope to change as the inner subscriptions change?

In my Angular 6 code snippet provided below, I am facing an issue: ngOnInit() { this.route.queryParams.subscribe((params: Params) => { const stuffId: string = params.stuffId; this.service.getState().subscribe((state) => { ...

javascriptangularrxjsobservablestate

Injecting external HTML into a Razor view with Html.Raw is causing the page's HTML to display incorrectly

I have a separate external HTML file, which serves as the body of an email. This HTML file contains all necessary tags and elements for a complete HTML structure. I am trying to display this email content inside a Bootstrap modal. <div class="moda ...

htmlasp.netasp.net-mvcrazor

Managing several items within one function

I am working with a json file that contains similar data sets but different objects. { "AP": [{ "name": "Autogen Program" }, { "status": "Completed" }, { "start": "2014-05-05" }, { ...

javascriptjson

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?

I am currently utilizing SortableJS to develop a drag-and-drop form builder that consists of three types/levels of draggable items: Sections, Questions, and Options. Sections can be dragged and reorganized amongst each other, Questions can be moved within ...

javascripthtmldrag-and-dropsortablejs