<p>I have an image and on it are logos (it's a map), I want to have a little box popup with information about that logo's location when the user moves their mouse over said logo.</p>

<p>Can I do this without using a javascript framework and if so, are there any small libraries/scripts that will let me do such a thing?</p>

[{'answer_id': 25165, 'author': 'Sören Kuklau', 'author_id': 1600, 'author_profile': 'https://Stackoverflow.com/users/1600', 'pm_score': 3, 'selected': False, 'text': '<p>A single image alone doesn\'t give the browser the semantic information on the logos within. You could use an <a href="http://en.wikipedia.org/wiki/Image_map" rel="noreferrer">image map</a> to supply the coordinates. To achieve tooltips, just apply a <code>title</code> attribute to each link. For more sophisticated tooltips (such as with styling, multiple lines, etc.), you\'ll need something non-standard, such as <a href="http://labs.unitinteractive.com/unitip.php" rel="noreferrer">UniTip</a>.</p>\n'}, {'answer_id': 25167, 'author': 'Ross', 'author_id': 2025, 'author_profile': 'https://Stackoverflow.com/users/2025', 'pm_score': 2, 'selected': False, 'text': '<p>MooTools has a nifty script for this. See <a href="http://docs.mootools.net/Plugins/Tips" rel="nofollow noreferrer">MooTools Tips</a>. Lightweight on the HTML as well.</p>\n\n<p>Here\'s a <a href="http://demos111.mootools.net/Tips" rel="nofollow noreferrer">demo</a> of the 1.11 version.</p>\n'}, {'answer_id': 25211, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 3, 'selected': False, 'text': '<p>The <a href="http://www.w3.org/TR/html4/struct/global.html#h-7.4.3" rel="nofollow noreferrer"><code>title</code></a> attribute is the simplest solution and guaranteed to work, <em>and</em> degrade gracefully for useragents that don\'t support it correctly.</p>\n'}, {'answer_id': 25262, 'author': 'Peter Hilton', 'author_id': 2670, 'author_profile': 'https://Stackoverflow.com/users/2670', 'pm_score': 4, 'selected': True, 'text': '<p>Yes, you can do this without Javascript. Use an HTML image map, with title attributes, like this:</p>\n\n<pre><code>&lt;img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;\n&lt;map name="logo"&gt;\n&lt;area shape="rect" href="" coords="52,42,121,65" title="Stack"&gt;\n&lt;area shape="rect" href="" coords="122,42,245,65" title="Overflow"&gt;\n&lt;/map&gt;\n</code></pre>\n\n<p>The Stack Overflow logo refers to the <a href="http://www.w3.org/TR/html4/struct/objects.html#edef-MAP" rel="nofollow noreferrer">image map</a>, which defines a rectangle for each of the two words using an <code>area</code> tag. Each <code>area</code> tag\'s <code>title</code> element specifies the text that browsers generally show as a tooltip. The <code>shape</code> attribute can also specify a circle or polygon. </p>\n'}, {'answer_id': 173635, 'author': 'GDmac', 'author_id': 25286, 'author_profile': 'https://Stackoverflow.com/users/25286', 'pm_score': 2, 'selected': False, 'text': '<p>Indeed mootools is one of the many frameworks<br>\nthat allow you to add functionality to any element on<br>\nyour webpage. Here is a link to a small tutorial.<br>\n<a href="http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips" rel="nofollow noreferrer">http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips</a></p>\n\n<p>Mootools isn\'t really a copy-paste type of framework,<br>\nit encourages you to look over the supplied code and<br>\nroll your own solution with some excellent examples.</p>\n'}, {'answer_id': 639354, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>You can try javascript widget at <a href="http://www.taggify.net/" rel="nofollow noreferrer">http://www.taggify.net/</a> . Script allows to add tooltips for the part of the image - when user move mouse over the region on the photo the script popups tooltip, draws border around region and fades other parts. Cool thing for marking people on the photo.  See demo at <a href="http://www.taggify.net/demo.aspx" rel="nofollow noreferrer">http://www.taggify.net/demo.aspx</a></p>\n'}, {'answer_id': 32331929, 'author': 'Ajay Gupta', 'author_id': 2663073, 'author_profile': 'https://Stackoverflow.com/users/2663073', 'pm_score': 1, 'selected': False, 'text': '<p>you can use <code>title</code> attribute for simple tooltip. its works on almost all DOM objects.</p>\n'}]
['https://Stackoverflow.com/questions/25161', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1384652/']