How to Add a Tooltip to an Svg Graphic

How to add a tooltip to an svg graphic?

You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/

Adding tooltip to SVG rect tag

SVG uses title elements, not attributes, you can't style them though. If you need styling you'd need to create the title dynamically as a <text> element and place it at the right location using javascript.

This is what default tooltips look like...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">    <g>        <rect id="1" fill="#666666" width="20" height="20">          <title>There's some text</title>        </rect>        <rect id="2" x="30" fill="#666666" width="20" height="20">          <title>There's another text</title>        </rect>   </g></svg>

How to display a tooltip div when an SVG element is hovered

It's pretty simple. It just requires a few lines of Javascript.

When we mouse over the icon, we position the popup and show it. On mouseout, we hide it again.

Also note the pointer-events="all" on the icon, which ensures that the mouse is considered "over" an icon element even for the bits that have an invisible fill.

var myicon = document.getElementById("myicon");var mypopup = document.getElementById("mypopup");
myicon.addEventListener("mouseover", showPopup);myicon.addEventListener("mouseout", hidePopup);
function showPopup(evt) { var iconPos = myicon.getBoundingClientRect(); mypopup.style.left = (iconPos.right + 20) + "px"; mypopup.style.top = (window.scrollY + iconPos.top - 60) + "px"; mypopup.style.display = "block";}
function hidePopup(evt) { mypopup.style.display = "none";}
body {  background-color: #33333f;}
#mypopup { width: 400px; padding: 20px; font-family: Arial, sans-serif; font-size: 10pt; background-color: white; border-radius: 6px; position: absolute; display: none;}
#mypopup::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); background-color: white; position: absolute; left: -6px; top: 68px;}
<svg width="400" height="400">  <g id="myicon" pointer-events="all">    <circle cx="100" cy="150" r="14" fill="none" stroke="gold" stroke-width="2"/>    <circle cx="100" cy="144" r="2" fill="gold"/>    <rect x="98.5" y="148" width="3" height="10" fill="gold"/>  </g></svg>
<div id="mypopup"> <h3>Popup title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

How to add a tooltip to existing svg circles?

I menage to solve my problem, so I will leave the answer if someone get stuck like me.

var titleCreate = svg.selectAll("g.gradici circle").append("title").text("tooltip");
for (var i =0; i<naziviGradova.length; i++){
var textNazivaGradova = naziviGradova[i];
var title = svg.getElementsByTagName("title");
title[i].innerHTML = textNazivaGradova;

}

How to add tooltip to an svg graphics element using javascript

As Robert said, SVG doesn't use title attributes. It has a <title> element instead.

https://www.w3.org/TR/SVG11/single-page.html#struct-DescriptionAndTitleElements

If you want to add a tooltip to an SVG group, you'll need to create a <title> element for your group.

<g>
<title>Your tooltip here</title>
... other elements...
</g>

The D3 code will look something like this:

d3.selectAll('.dimension .axis')[0].append("svg:title").text("Your tooltip here");

How to create an SVG tooltip-like box?

<svg>
<text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
<text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
<set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
</text>
</svg>

Further explanation can be found here.

Angular - Add tooltip to SVG element

I was having the same problem with ngbootstrap. It turns out that the tooltip creates a div, and if it is inside an svg, Angular will not render it. So my solution was to create a little html mask over the area of the svg where I wanted to trigger the tooltip.

HTML:

<div>
<svg>
<ellipse id="svg_2" cy="78.999999" cx="1042.499999" stroke-width="1.5" stroke="#000" fill="#fff"/>
</svg>
<div ngbTooltip="My tooltip" class="mytooltip" triggers="hover:blur click:blur focus:blur" [ngStyle]="{ 'left.px': leftPosition, 'top.px': topPosition }"></div>
</div>

Where leftPosition and topPosition are set dynamically in your ts file.

SCSS/CSS:

.mytooltip {
position: absolute;
width: 10px; //whatever is a reasonable hit area
height: 10px;
}

If your svg element placement is not dynamic, then you could just put it all in the style sheet. In my case, I had multiple tooltips I needed to attach to elements with varying widths and positions. You could also drop the class and add all the styling to ngStyle.

This method is probably not good for massively dynamic or interactive svgs, such as with D3.js, but that has it's own tooltip system anyway.

Creating a hover tooltip for SVG elements, using only html and css

Edit: After reading your answer again I think I might have misunderstood what you were asking.

If each circle is supposed to have its own tooltip then the following code is correct but if the tooltip content is the same and is supposed to work when you hover any part of the SVG element then the code at the bottom is the correct one.

<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 1000 1000">
<g id="facilites">
<circle class="st2" cx="420.25" cy="333.25" r="25.25">
<title>This is the first tooltip</title>
</circle>
<circle class="st2" cx="666.25" cy="470.25" r="25.25">
<title>This is the second tooltip</title>
</circle>
</g>
</svg>
</body>
</html>


Original (one tooltip for all of the SVG element)

Try using a element.
In the code below the user hovers the mouse over the svg and the works as a tooltip.

<!DOCTYPE html>
<html>
<style>
rect {
width: 100%;
height: 100%;
opacity: 0;
}
</style>
<body>
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<g id="facilities">
<circle class="st2" cx="420.25" cy="333.25" r="25.25"/>
<circle class="st2" cx="666.25" cy="470.25" r="25.25"/>
</g>
<rect>
<title>This is a single tooltip for the full SVG element</title>
</rect>
</svg>
</body>
</html>


Related Topics



Leave a reply



Submit