Place label at a set position when the mouse hovers over it

Question

Place label at a set position when the mouse hovers over it

I need help creating a simple hover effect on a circle using jQuery. I'm facing an issue where the label location of the city overlaps with the circle when the mouse hovers over it. The label should be fixed in position on top of the red circle. Even when trying to describe a short-named city, the label overlapping remains unaddressed. For example:

const regionObject = {"philadelphia" : "Philadelphia",}

$(function(){


    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id');


      
        const regionObject = {
            "philadelphia" : "Philadelphia, a city in Pennsylvania",
                    }


        

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (e.pageX - 40) + 'px',
                "top": (e.pageY - 45) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});


    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>


        

<!--Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=" sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./map.js"></script>
</body>
</html>

html jquery css svg geometry

Answer 1

Answer №1

If you're looking for a CSS-only solution, try using the ::after pseudoclass to display a tooltip when hovering over an element. You can customize the position of the tooltip by adjusting the top and left properties.

body { margin: 50px }
#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  border: 3px solid black;
}

#circle:after {
  content: "This is tooltip";
  position: absolute;
  top: -20px;
  left: 50%;
  display:none;
  
  /* these are just to make it prettier */
  background-color: black;
  padding: 10px;
  color: white;
  border-radius: 5px;
  opacity: .7; /* erase this if you dont want it transparent */
}

#circle:hover:after {
  display: block;
}

<div id="circle"></div>

To personalize the tooltip content, you can fetch the value from any attribute of the circle element, like title. Simply use: content: attr(title)

Answer 2

If you're looking for a CSS-only solution, try using the ::after pseudoclass to display a tooltip when hovering over an element. You can customize the position of the tooltip by adjusting the top and left properties.

body { margin: 50px }
#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  border: 3px solid black;
}

#circle:after {
  content: "This is tooltip";
  position: absolute;
  top: -20px;
  left: 50%;
  display:none;
  
  /* these are just to make it prettier */
  background-color: black;
  padding: 10px;
  color: white;
  border-radius: 5px;
  opacity: .7; /* erase this if you dont want it transparent */
}

#circle:hover:after {
  display: block;
}

<div id="circle"></div>

To personalize the tooltip content, you can fetch the value from any attribute of the circle element, like title. Simply use: content: attr(title)

Answer 3

Answer №2

To utilize your code effectively, consider obtaining the center of the circle and utilizing the cx and cy attributes to position the label.

Furthermore, there seems to be a flickering issue when the mouse hovers over the label. To address this, include

.current_region{pointer-events:none;}

in CSS

$(function(){


    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id'); 
        const cx = Number($(this).attr('cx'));
        const cy = Number($(this).attr('cy'));

      
        const regionObject = {
            "philadelphia" : "Philadelphia, city in Pennsylvania",
                    }

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (cx + 40) + 'px',
                "top": (cy - 20) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});


    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }
  
  .current_region{pointer-events:none;}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>


        

<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=" sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="    sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./map.js"></script>
</body>
</html>

Answer 4

To utilize your code effectively, consider obtaining the center of the circle and utilizing the cx and cy attributes to position the label.

Furthermore, there seems to be a flickering issue when the mouse hovers over the label. To address this, include

.current_region{pointer-events:none;}

in CSS

$(function(){


    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id'); 
        const cx = Number($(this).attr('cx'));
        const cy = Number($(this).attr('cy'));

      
        const regionObject = {
            "philadelphia" : "Philadelphia, city in Pennsylvania",
                    }

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (cx + 40) + 'px',
                "top": (cy - 20) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});


    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }
  
  .current_region{pointer-events:none;}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>


        

<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=" sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="    sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./map.js"></script>
</body>
</html>

Place label at a set position when the mouse hovers over it

Answer №1

Answer №2

Similar questions

The URL requested exceeds the maximum length limit in asp.net, causing a 414 error

Update Calendar Information Without Reloading the Entire Page

how to target the last child element using CSS commands

Ways to alter formData using jQuery

Strategies and Methods for Assessing the Content and Organization of a Website

"Exploring the Differing Approaches of Ajax: Constructing

Numeric input of 10 not recognized in the textbox

Activate Popover on Third Click with Bootstrap 4

Analyzing length of strings by dividing content within div tags using their unique ids

handsontable - personalized HTML button placed at the beginning of each row that performs an action when clicked

The information I input into this form is failing to be stored in the WAMP database

Issue with Javascript Promise causing failure to populate list with objects

"Utilizing Bootstrap 4: Understanding the Optimal Times to Implement the 'Row

Checking for non-empty values in a jQuery UI DateRangePicker

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

Error message displayed: "Validator.elementValue is not a recognized function in JQuery Validation."

What is the best way to ensure that a canvas created using JavaScript spans 100% of the width?

Issue with Webpack: file-loader failing to load SVG files dynamically in HTML

The remove() function is failing when attempting to add input fields dynamically

Using Golang to make an AJAX request and send data via a