Ruby On Rails, Design, Simplicity, Web 2.0, Ajax, Mac and Tons of Pizza.

Creating bubble tooltips.....

Posted by Annalisa Afeltra in Design - Web 2.0 - comments are closed

While trying to look for tips and tricks to make my web applications more interesting I came across an interesting article written by Alessandro Fulciniti . He uses javascript, css and a simple image to create bubble tooltips on web applications.

How it works:

Firstly the javascript, css and image must be saved in the same directory as the page.

It simply uses an image that is called from the css file, therefore this can be modified with an image that you prefer.

The following must be copied into the head section of the page to reference the javascript file and the javascript file BubbleTooltips must be copied into the same directory.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

If you require some links to be without the bubble tooltip, the following script should rather be used as it requires an id to be passed to it that specifies which link requires the bubble tooltip to appear.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

<span class="tooltip">
<span class="top">title of the link</span>
<b class="bottom">url of the link, max 30 chars</b>
</span>

<a href="http://whodo.es">Who Does</a> 

 <div id ="content"></div>

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}