There seems to be an issue with the on() function in jQuery when using mouseover

Question

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribute when hovering over the word "surpi". The HTML line containing this dynamic content is generated using JavaScript. Here is the code snippet:

<a href="#" data-popup="surpris">supri</a>

$(document).ready(function() {
  popup();
});

function popup() {
  $("#correction").on("mouseover", "a", function() {
    var data = $(this).attr("data-popup"),
      offsetDataTop = $(this).offset().top,
      offsetDataLeft = $(this).offset().left;

    if (data != "") {
      // Create .popup element
      $("body").prepend("<div class='popup'>" + data + "</div>");
      // Set properties for .popup
      var popupWidth = $(".popup").innerWidth(),
        thisWith = $(this).innerWidth(),
        marginLeft = (thisWith - popupWidth) / 2;
      // Initialize .popup
      $(".popup").css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      });
      // Animate .popup
      $(".popup").animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }, function() {
    $(".popup").remove();
  }); // Remove .popup
};

jquery html css

Answer 1

Answer №1

Here is my approach using mouseenter and mouseleave:

$(document).ready(function() {
  $('#solution').on('mouseenter', '[data-tooltip]', function() {
    var $this=$(this)
    var data =$this.attr("data-tooltip").trim();
    var offsetDataTop = $this.offset().top;
    var offsetDataLeft = $this.offset().left;
    if (data != "") {
      // Create tooltip
      var $tooltip=$("<div class='tooltip'>" + data + "</div>");
      $("body").prepend($tooltip);
      
      // Set tooltip properties
      var marginLeft = ($this.innerWidth() - $tooltip.innerWidth()) / 2;
      
      // Initialize tooltip
      $tooltip.css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      }).animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }).on('mouseleave', '[data-tooltip]', function() {
      $(".tooltip").remove();
  })
});

.tooltip{
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="solution">
<br>
<br>
  <a href="#" data-tooltip="amazing">awesome</a>
</div>

<div id="output"></div>

Answer 2

Here is my approach using mouseenter and mouseleave:

$(document).ready(function() {
  $('#solution').on('mouseenter', '[data-tooltip]', function() {
    var $this=$(this)
    var data =$this.attr("data-tooltip").trim();
    var offsetDataTop = $this.offset().top;
    var offsetDataLeft = $this.offset().left;
    if (data != "") {
      // Create tooltip
      var $tooltip=$("<div class='tooltip'>" + data + "</div>");
      $("body").prepend($tooltip);
      
      // Set tooltip properties
      var marginLeft = ($this.innerWidth() - $tooltip.innerWidth()) / 2;
      
      // Initialize tooltip
      $tooltip.css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      }).animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }).on('mouseleave', '[data-tooltip]', function() {
      $(".tooltip").remove();
  })
});

.tooltip{
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="solution">
<br>
<br>
  <a href="#" data-tooltip="amazing">awesome</a>
</div>

<div id="output"></div>

Answer 3

Answer №2

Modify this section:

$("#correction").on("mouseover", "a", function() {

With this:

$("#correction").on("mouseenter", "a", function() {

Answer 4

Modify this section:

$("#correction").on("mouseover", "a", function() {

With this:

$("#correction").on("mouseenter", "a", function() {

Answer 5

Answer №3

1) The element you are targeting with #correction does not exist in your provided example. You must add this id to the element

<a href="#" id="correction" data-popup="surpris">supri</a>

2) Instead of executing the popup method as shown in your code, you can directly bind to the element like this:

$("#correction").on("mouseover", function() {
    // Perform actions here
});

3) To remove the popup element using the mouseleave event, you can combine both functions within the same method:

$("#correction").on({
    mouseover: function () {
        // Perform actions here
    },
    mouseleave: function () {
        // Perform actions here
    }
})

Check out https://jsfiddle.net/mark_c/jtwnyeLy/ for a demonstration.

Answer 6

1) The element you are targeting with #correction does not exist in your provided example. You must add this id to the element

<a href="#" id="correction" data-popup="surpris">supri</a>

2) Instead of executing the popup method as shown in your code, you can directly bind to the element like this:

$("#correction").on("mouseover", function() {
    // Perform actions here
});

3) To remove the popup element using the mouseleave event, you can combine both functions within the same method:

$("#correction").on({
    mouseover: function () {
        // Perform actions here
    },
    mouseleave: function () {
        // Perform actions here
    }
})

Check out https://jsfiddle.net/mark_c/jtwnyeLy/ for a demonstration.

There seems to be an issue with the on() function in jQuery when using mouseover

Answer №1

Answer №2

Answer №3

Similar questions

Using Kendo Grid to Transfer Data Between Grid Cells

Pass the html form data to a PHP variable

Rearrange list items by dragging and dropping

How can we refine the user information based on the selection of a radio button?

Adjust the header and menu color as you scroll

Having difficulty locating the identification number of an item within the HTML coding

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

Can you modify a specific column in a table using mat-table in Angular material?

Adjust the CSS property dynamically based on the quantity of items within a div container

Chrome is where all the action happens, while Firefox prefers to keep things on the left

Looking for a reliable contact form?

Dynamic Bootstrap Popover: Creating interactive popups by dynamically attaching events to buttons

Troubleshooting script not detecting changes in form

How can I populate a select dropdown list in Django using JsonResponse?

Sometimes the data-autoplay feature does not function properly in jQueryfullPage.js

Tips for retrieving the text value on keyboard enter press without triggering form submission

Creating a two-column post loop in Wordpress is a great way to display content in a

Troubleshooting: CSS causing images to not show up on

Having trouble viewing a dynamically adjusting Angular NVD3 graph embedded in bootstrap

Clicking on a link with JQuery does not fire the action when the href attribute is set to "#open-site"