How to add a tooltip to an svg graphic?

Asked
Active3 hr before
Viewed126 times

7 Answers

90%

Stack Overflow Public questions & answers , Meta Stack Overflow , Stack Overflow help chat ,Thanks for contributing an answer to Stack Overflow!

rect {
   width: 100 % ;
   height: 100 % ;
   fill: #69c;
  stroke: # 069;
   stroke - width: 5 px;
   opacity: 0.5
}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p>

<svg xmlns="http://www.w3.org/2000/svg">
   <rect>
      <title>Hello, World!</title>
   </rect>
</svg>
load more v
88%

Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element.,The <title> element provides an accessible, short-text description of any SVG container element or graphics element.,© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.,This element only includes global attributes

html, body, svg {
   height: 100 %
}
load more v
72%

For this tutorial, I'm going to write the code in a <script> element inside the SVG itself (which means it will still work if I email the SVG to someone). Make sure the script element appears as the last element in the SVG, so the tooltip <text> element exists when the script is run. The code will be the same if you put the JS in a separate file, so long as the SVG is inline, otherwise see my SVG + JS tutorial for how to access the SVG document.,Then, in the showTooltip function we find the length of the tooltip <text> element with getComputedTextLength(), and use this to set the length of the rects.,We also need to update the way we change the content of the text element since the tooltip variable no longer directly refers to it. So we can create a new variable to refer to the text inside the first <text> element inside the tooltip group:,The first thing to do is to add a <text> element at the end of your SVG so it will be drawn over the top of the other elements. It doesn't matter what the x and y attributes are, since we will dynamically change them later, and it is current hidden due to the visibility="hidden" attribute. I've given the text element the id "tooltip" which allows us to easily select it.

<rect x="40" y="50" width="80" height="100" fill="#007bbf">
   <title>A blue box</title>
</rect>
<rect x="180" y="50" width="80" height="100" fill="#ec008c">
   <title>A pink box</title>
</rect>
load more v
65%

First, a basic circle is added using .svg. Note that it would work the same with any type of svg element., Tooltip position , Most basic tooltip ,Note that you can add a numeric value next to event.pageX or Y to adjust the tooltip position

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>

// Start by creating the svg area
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 400)
    .attr("height", 400)

// Append a circle
svg.append("circle")
  .attr("id", "circleBasicTooltip")
  .attr("cx", 150)
  .attr("cy", 200)
  .attr("r", 40)
  .attr("fill", "#69b3a2")

// create a tooltip
var tooltip = d3.select("#my_dataviz")
  .append("div")
    .style("position", "absolute")
    .style("visibility", "hidden")
    .text("I'm a circle!");

//
d3.select("#circleBasicTooltip")
  .on("mouseover", function(){return tooltip.style("visibility", "visible");})
  .on("mousemove", function(){return tooltip.style("top", (event.pageY-800)+"px").style("left",(event.pageX-800)+"px");})
  .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

</script>
load more v
75%

I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?,Of course, if you're going to be making lots of icons and using them multiple places, I would suggest: ,For example, to add an inline icon image at the end of every element with the class "warning", you would do something like this:,nesting each image/use element within a <g> element, and applying the clipping path to it, so that you only have to define the clipping path once (assuming all icons are the same size).

Expanding on @robert-longson's answer, you can use SVG's elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here's one possible implementation:

// Returns path data for a rectangle with rounded right corners.
// The top-left corner is ?x,y?.
function rightRoundedRect(x, y, width, height, radius) {
   return "M" + x + "," + y +
      "h" + (width - radius) +
      "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius +
      "v" + (height - 2 * radius) +
      "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius +
      "h" + (radius - width) +
      "z";
}

You can then call this function to compute the "d" attribute. For example:

rects.enter().append("path")
   .attr("d", function(d) {
      return rightRoundedRect(x(0), y(d.name), x(d.value) - x(0), y.rangeBand(), 10);
   });

Optional: If you like, you could refactor the rightRoundedRect function to make it configurable, rather than taking lots of arguments. This approach would be similar to D3's built-in shape generators. For example, you might use a rect generator like so:

rects.enter().append("path")
   .attr("d", rightRoundedRect()
      .x(x(0))
      .y(function(d) {
         return y(d.name);
      })
      .width(function(d) {
         return x(d.value) - x(0);
      })
      .height(y.rangeBand())
      .radius(10));
load more v
40%

I do not understand the DOM values and how to pass the x and y co-ordinates to the following SVG tooltip rect box.,I have just updated the tooltip demo web-pages and tested with a desktop mouse, iPad Mini and an Android Moto G. I am delighted to say the tooltips work on all three operating systems.,I eventually managed to get the mouseover(…) and mouseout(…) working but unable to get the tooltip in the correct position.,I made some small changes and the CDN Cloud-Hosting could not find the amended web-page. I have renamed the web-page and link. It should be OK now:

I eventually managed to get the mouseover(…) and mouseout(…) working but unable to get the tooltip in the correct position.

<svg>
   ...
   ...
   <g transform="translate(50,50)" font-size="25">
      <rect id="tRct" x="25%" y="20" width="20em" height="3.2em" fill="#fff" />
      <text id="tTip" x="27%" y="50">Date to go here</text>
      <text id="tBox" x="27%" y="80">Temperature to go here</text>
   </g>
</svg>
load more v
22%

Text in an <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. When you hover over the element, the title of that element will be shown.,The <title> SVG element provides an accessible, short-text description of any SVG container element or graphics element.,How to make elements float to center?,Example: Making green consecutive circles inheriting attributes from the <g> element.

Syntax:

<title> TITLE HERE </title>
load more v

Other "undefined-undefined" queries related to "How to add a tooltip to an svg graphic?"