Show the appropriate tooltip message based on the circle that I hover over

Question

Show the appropriate tooltip message based on the circle that I hover over

I have a collection of 5 clickable circles, each with a unique ID and its own tooltip text that is sourced from an xml Data Interface.

    jQuery(function ($) {
    $.ajax({
        type: "GET",
        url: 'steel_agg_bof_flash_en.xml',
        dataType: "xml",
        success: xmlParser
      });
      function xmlParser(xml) {

          $(xml).find("hotspot").each(function () {
            var position   =  $(this).find('position').text();
            var arr        =  position.split(",");
            var hotspotid  =  $(this).find('hsid').text();
            var title      =  $(this).find('title').text();

            $('#clickAreas').prepend('<div id="'+ hotspotid +'_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: ' + arr[1] + 'px' + '; left: ' + arr[0] + 'px' +'; width: ' + Math.floor(arr[2]/3.28148) + 'px; height: '+ Math.floor(arr[2]/3.28148) + 'px; border-radius: 100%; cursor: pointer; opacity: 0.5;"><div class="tooltip"><p style="color: #ffffff;"> ' + title + '</p></div></div>');
          });

        } 

    });

The resulting HTML output can be seen at this link - http://jsfiddle.net/HJf8q/1860/

Later on, I added some CSS and Javascript to achieve the following:

When hovering over a circle, the tooltip should fade in, and when moving the mouse out of the circle, the tooltip should fade out (Check out the issue I faced with a single circle here - http://jsfiddle.net/HJf8q/1851/),
I'm having trouble displaying the corresponding tooltip text for each circle individually when hovered over, as it currently affects all circles at once. Any help or guidance would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

To achieve the fade effect in a tooltip, you can utilize CSS transition along with adjusting the opacity of the tooltip. Below is a concise example demonstrating how this can be implemented:

var tooltips = document.querySelectorAll('.clickMapItem .tooltip');

var items = document.querySelectorAll('.clickMapItem').forEach(function(el) {
    el.addEventListener('mousemove', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 1;

            if (typeof tooltip !== "undefined") {
                var x = (e.clientX - 10) + 'px',
                    y = (e.clientY - 70) + 'px';

                tooltip.style.top = y;
                tooltip.style.left = x;
            }
        }
    });

    el.addEventListener('mouseout', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 0;
        }
    });
});

body {
  background: grey;
}

.clickMapItem {
    background: #004593;
    /*position: absolute;
    top: 100px;
    left: 100px;*/
    width: 135px;
    height: 135px;
    border-radius: 100%;
    cursor: pointer;
    opacity: 0.5; 
    transition: all 0.5s ease;    
    margin: 30px;
}

.clickMapItem:hover {
    background: #004593;
    opacity: 0.8;

}
.clickMapItem .tooltip {
    /*display:none;*/
    opacity: 0;
    display:block;
    position:fixed;
    overflow:hidden;
    background: black;
    color: white; 
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
   
}
/*.clickMapItem:hover .tooltip {
    opacity: 1;
}*/

/*.clickMapItem:hover .tooltip:before {
  content: ' ';
  position: absolute;
  width: 0px;
  height: 0px;
  left: 38px;
  top: 10px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}*/

<div id="clickMapItem_1" class="clickMapItem">
    <div class="tooltip">
        <p>Tooltip Text</p>
    </div>
</div>


<div id="clickMapItem_2" class="clickMapItem">
    <div class="tooltip">
        <p>One more ytoolytip here</p>
    </div>
</div>

It is recommended to attach event listeners directly to elements instead of relying on global window events for specific element tasks.

UPDATE:

To address the issue of the tooltip staying visible when the mouse hovers over it, utilize javascript events like mousemove and mouseout for comprehensive hover handling. This approach allows filtering out child elements that might trigger unwanted events. Test the updated code provided to ensure it functions as desired.

Answer 2

To achieve the fade effect in a tooltip, you can utilize CSS transition along with adjusting the opacity of the tooltip. Below is a concise example demonstrating how this can be implemented:

var tooltips = document.querySelectorAll('.clickMapItem .tooltip');

var items = document.querySelectorAll('.clickMapItem').forEach(function(el) {
    el.addEventListener('mousemove', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 1;

            if (typeof tooltip !== "undefined") {
                var x = (e.clientX - 10) + 'px',
                    y = (e.clientY - 70) + 'px';

                tooltip.style.top = y;
                tooltip.style.left = x;
            }
        }
    });

    el.addEventListener('mouseout', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 0;
        }
    });
});

body {
  background: grey;
}

.clickMapItem {
    background: #004593;
    /*position: absolute;
    top: 100px;
    left: 100px;*/
    width: 135px;
    height: 135px;
    border-radius: 100%;
    cursor: pointer;
    opacity: 0.5; 
    transition: all 0.5s ease;    
    margin: 30px;
}

.clickMapItem:hover {
    background: #004593;
    opacity: 0.8;

}
.clickMapItem .tooltip {
    /*display:none;*/
    opacity: 0;
    display:block;
    position:fixed;
    overflow:hidden;
    background: black;
    color: white; 
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
   
}
/*.clickMapItem:hover .tooltip {
    opacity: 1;
}*/

/*.clickMapItem:hover .tooltip:before {
  content: ' ';
  position: absolute;
  width: 0px;
  height: 0px;
  left: 38px;
  top: 10px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}*/

<div id="clickMapItem_1" class="clickMapItem">
    <div class="tooltip">
        <p>Tooltip Text</p>
    </div>
</div>


<div id="clickMapItem_2" class="clickMapItem">
    <div class="tooltip">
        <p>One more ytoolytip here</p>
    </div>
</div>

It is recommended to attach event listeners directly to elements instead of relying on global window events for specific element tasks.

UPDATE:

To address the issue of the tooltip staying visible when the mouse hovers over it, utilize javascript events like mousemove and mouseout for comprehensive hover handling. This approach allows filtering out child elements that might trigger unwanted events. Test the updated code provided to ensure it functions as desired.

Answer 3

Answer №2

Hey there, I was able to figure it out using this method

Check out the code here: jsfiddle.net/HJf8q/1868/

I still need to make a few adjustments though, like adding opacity to the circle when hovering and implementing a transition on mouse movement

Answer 4

Hey there, I was able to figure it out using this method

Check out the code here: jsfiddle.net/HJf8q/1868/

I still need to make a few adjustments though, like adding opacity to the circle when hovering and implementing a transition on mouse movement

Show the appropriate tooltip message based on the circle that I hover over

Answer №1

Answer №2

Similar questions

Aligning two divs vertically within another div without relying on the display:flex property

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I'm puzzled as to why the color of my top border isn't displaying even though I've correctly implemented the border

Tips for transferring a reference to a variable, rather than its value, to a method in VueJS

Ways to customize tab display in Bootstrap 5

tips for selecting various API requests based on the selected drop down menu choice

The displayed database results will appear in the opposite order of what was originally assigned for both inline and block elements

GLTF file: Error 404 - File could not be located

Implementing Vuetify 3 and vue-i18n for the tag attribute

React and React Native not synchronizing with authentication context

Mobile Device Centering Problem with Bootstrap Cards

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

If you invoke functionA within functionB, will functionA be called? How does this affect the compilation process?

What could be the reason behind Firefox displaying 0 as the value retrieved from $(window).height()?

Node.js continually throwing 503 errors

Creating a unique 32-bit unsigned integer identifier for use in Couchbase

Switching an element from li to div and vice versa using Jquery Drag and Drop

Troubleshooting: Layout display issue on Internet Explorer 8

When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

Adjust the height of the bootstrap carousel