How can I add an SVG tooltip that appears when I hover my

I have successfully implemented an SVG map showing marked locations and polygons, with CSS styling that makes the areas stand out on hover. I achieved this without using any JavaScript code.

My next goal is to create a hovering window or tooltip that displays text whenever the mouse hovers over a specific area on the map. The challenge is to have this window appear precisely over the correct location on the map as well.

I am seeking suggestions for the simplest way to accomplish this task. For reference, you can view the SVG map here.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 1175" enable-background="new 0 0 1600 1175" xml:space="preserve">
            <g id="Layer_1">
            ...
            </g>
                <g id="Capitals_1_">
                    <g id="Capitals">
                    ... (list of capital cities on the map)
                    </g>
                </g>
            </svg>
javascriptjqueryhtmlcsssvg

Answer №1

Be sure to include a title element within each polygon like this:

<polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5
                                                    1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25
                                                    913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674
                                                    738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25
                                                    727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75
                                                    873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   ">
                                                        <title>Andor</title></polygon>

To specify multi-line titles use the following format:

<title>line 1
line 2
line 3
</title>

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

Twig: A guide to showcasing HTML content within block titles

Within my Symfony2 project, I am utilizing various twig templates. One of these templates contains a block labeled title. {% block title %}{{ announcement.title }}{% endblock %} The issue arises when the variable {{ announcement.title }} contains HTML ta ...

phphtmlsymfonytwig

Styling pagination using CSS and jQuery

I am looking to display 3 sections in a simple, paginated way that mimics tabs. I am trying to implement the logic where when a pagination item is clicked and has the 'active' class, it should show the corresponding block. However, I am strugglin ...

javascriptjqueryhtmlcsspagination

Is there a way to assign a role to a user without requiring them to send a message beforehand?

I've been searching for a solution to this issue, but all I could find were instructions on how to assign a server role to someone who has interacted in some way. Is there a way to locate a specific user on a server and assign a role to them without ...

javascriptnode.jsdiscord.js

Encountering the error [object Object] when passing variables through Ajax, jQuery, and JSON

I am having an issue passing an array with JSON in PHP: $array = array ($a, $b, $c); echo json_encode($array); and then trying to utilize it in jQuery like this: $(function () { $.ajax({ url: 'api.php', data: "", da ...

phpjqueryajaxjson

jQuery does not have the capability to add or remove classes

I am currently using Vue.js within Laravel, and in the watch action, I am utilizing jQuery. I am puzzled as to why hasClass is functioning correctly, but addClass, removeClass, and toggleClass are not working as expected. Here is a snippet of my HTML cod ...

jqueryvue.js

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...

javascripthtmlcssmenusuperfish

Does the unique identifier of the element remain constant in jQuery?

For example: $("#savenew").live('click', function(e) { var user=<?php echo $user?>; $.ajax({ type: "POST", url: "actions/sub.php", data:{user: user} , ...

javascriptjqueryajaxrequest

Local host's attempt to retrieve data from an external site via an Axios GET request was rejected

I'm currently attempting to execute a GET request on an external website in order to scrape some information. Unfortunately, my axios GET request is returning a connection error. I suspect that this issue may be related to the fact that I am sending t ...

javascripthttpexpressaxios

What is the proper way to integrate EJS tags within script tags in EJS files?

I am encountering an issue with the code in my index.ejs file from YelpCamp, which is a part of Colt Steele's course. const campgrounds = <%- JSON.stringify(campgrounds) %>; I attempted to fix it by changing the code to: const campgrounds = &ap ...

javascripthtmljsonexpressejs

Troubles with npm installation of jsdom on Ubuntu 14.04 OS

I have been struggling to install jsdom in my script, encountering an error that I can't find a solution for. Most people face issues with g++ not being installed, but I already have it installed. Here is the content of my package.json file: { "na ...

jquerylinuxnode.jsubuntujsdom

Embracing the beauty of incorporating nested quotations

I've been experimenting with jquery's append functions lately. I'm adding a substantial amount of html, specifically a button with an onclick event function. It might sound complicated, but due to some technical restrictions, this is my onl ...

javascriptjquery

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

Using AngularJS directives in Markdown

I am currently working on creating a custom HTML directive using AngularJS that will allow me to display Markdown content in the browser. My goal is to have a <markdown> element with a src attribute that will dynamically load and render the specified ...

javascripthtmlangularjsmarkdown

A method to use jQuery to replace newlines with commas in user input

Input Processing Challenge <input> Whenever there is multi-line text pasted into the input field, I need to replace newlines (\r, \n, and \r\n) as well as tabs \t with commas ,. This scenario mainly occurs when users copy c ...

javascriptjqueryregexclipboardjquery-events

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

javascripthtmlcsstwitter-bootstrap

Learn the method of conditionally resetting the state count using React hooks

When a user submits the form, the handleSubmit function runs to count the number of li elements with class names containing "show" within the search results div. It adds up these counts using setStoreCount(prevCount => prevCount + 1) and updates the UI ...

javascriptreactjsreact-hooksnext.js

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

htmlcsssvg

Ways to conceal a div in React when the input or child is not in focus

My custom search and select component includes an input field and a results list enclosed in a wrapper container: <div className='wrapper'> <input /> <div className='results'> <div>Result Item</div> ...

javascriptreactjs

Movement occurring outside the boundaries of the element

Whenever I hover over the hyperlink, it extends beyond the text of the link. Check out the jsFiddle demonstration: jsFiddle It seems like it is taking the width of the <div>, causing it to be displayed across the entire <div>. Below is the H ...

csszurb-foundation

The Vue ChartJS fails to display properly after the page is refreshed

Although this issue may appear to be a common one, some of the suggested solutions are outdated or no longer functional. My objective is to ensure that the chart remains responsive even after the page reloads. I attempted to implement the solution provided ...

javascriptvue.js