Menu
What's the best solution for adding tooltip to <rect>?
I've created SVG map with several <rect> tags and I'd like to show tooltip on mouseover. Using title attribute is fine but is there any option how to restyle it using CSS/Javascript/jQuery or is there even better option for adding tooltip?
<svg version="1.1" baseProfile="basic" 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" title="There's some text" x="0" y="0" fill="#666666" width="20" height="20"/>
<rect id="2" title="There's another text" x="30" y="0" fill="#666666" width="20" height="20"/>
</g>
</svg>
653
Via data attributes − To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin.
A tooltip can appear when the user clicks an icon or text, hovers over something, or loads a new page. The hover-on action will happen when the user hovers over something with a tooltip. For example, hovering over a button may display a tooltip prompt.
Tooltip content can be any HTML, not just plain text. Move your mouse over the Download button and you'll see a tooltip that contains an image, table and a link element. You can also see the slide effect in action.
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
