Tuesday, May 22, 2007

Bubble Tooltips

Bubble Tooltips is a script that presents tooltips with a graphic background. This can be an attractive design feature as well as a way of drawing attention to any messages you may want to emphasize. Tooltips display the text that appears in the "title" attribute of your url link. eg:

<a href="sueblimelybt.blogspot.com title="a blog about blogging">
Sueblimely Discovering Blogging</a>

I had the script installed on this blog but it conflicted with the Line Buzz inline commenting feature. I have therefore created an example on my own server. Example of Bubble Tooltips

The script for this was created by Alessandro Fulciniti. Please read his his article for a full description and code download..

2 comments:

Aimee said...

Neat! Will this work for wordpress?

Sueblimely said...

Hi aimee.

Yes this will work for Wordpress. You will need to go into Theme Editor to add a link to the js and CSS files.

If you do not have access to your own server, so need to include the js and css in the template itself, you will have to change one line of the js code to stop it pointing to a seperate css file. Change the line

l.setAttribute("href","bt.css");

to:

l.setAttribute("href","self");

You will have to set a title attribute to the links you wish to have bubble tips on.
Hope this helps. Please let me know if you need more instruction.

Tuesday, May 22, 2007

Bubble Tooltips

Bubble Tooltips is a script that presents tooltips with a graphic background. This can be an attractive design feature as well as a way of drawing attention to any messages you may want to emphasize. Tooltips display the text that appears in the "title" attribute of your url link. eg:

<a href="sueblimelybt.blogspot.com title="a blog about blogging">
Sueblimely Discovering Blogging</a>

I had the script installed on this blog but it conflicted with the Line Buzz inline commenting feature. I have therefore created an example on my own server. Example of Bubble Tooltips

The script for this was created by Alessandro Fulciniti. Please read his his article for a full description and code download..

2 comments:

Aimee said...

Neat! Will this work for wordpress?

Sueblimely said...

Hi aimee.

Yes this will work for Wordpress. You will need to go into Theme Editor to add a link to the js and CSS files.

If you do not have access to your own server, so need to include the js and css in the template itself, you will have to change one line of the js code to stop it pointing to a seperate css file. Change the line

l.setAttribute("href","bt.css");

to:

l.setAttribute("href","self");

You will have to set a title attribute to the links you wish to have bubble tips on.
Hope this helps. Please let me know if you need more instruction.