How to create an SVG "tooltip"-like box?

popup svg tooltip
morais picture morais · Sep 19, 2008 · Viewed 63.5k times · Source

Given an existing valid SVG document, what's the best way to create "informational popups", so that when you hover or click on certain elements (let's say ) you popup a box with an arbitrary amount (i.e. not just a single line tooltip) of extra information?

This should display correctly at least in Firefox and be invisible if the image was rasterized to a bitmap format.

Answer

Neil Fraser picture Neil Fraser · Oct 16, 2012

This question was asked in 2008. SVG has improved rapidly in the intervening four years. Now tooltips are fully supported in all platforms I'm aware of. Use a <title> tag (not an attribute) and you will get a native tooltip.

Here are the docs: https://developer.mozilla.org/en-US/docs/SVG/Element/title

Related questions

How to generate a simple popup using jQuery

I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?

Read More
Javascript Confirm popup Yes, No button instead of OK and Cancel

Javascript Confirm popup, I want to show Yes, No button instead of OK and Cancel. I have used this vbscript code: <script language="javascript"> function window.confirm(str) { execScript('n = msgbox("' + str + '","4132")', "vbscript"); return (n == 6); } &…

Read More
HTML / CSS Popup div on text click

I want to make popup div instead of popup window for my 'About' picture/page with current button like in this example:

Read More