I've made a very simple implementation of tooltip in JavaScript, it looks very similar to original found in Office 2007. Feel free to use, tweak or improve this script.
Below are screenshots and here is the demo page
Simple tooltip
Elements: title, text
|
Office 2007
|
|
|
|
Our tooltip
|
|
Function call for this tooltip:
onmouseover="showTooltip('Simple tooltip,'This is simple tooltip')"
|
Simple tooltip with additional help info
Elements = title, text, additional help icon, additional help text
|
Office 2007
|
|
|
|
Our tooltip
|
|
Function call for this tooltip:
onmouseover="showTooltip('Simple tooltip with additioanl info','This is simple tooltip with additional info','Press F1 for more help','helpicon.png')"
|
Complex tooltip
Elements: title, text, additional help icon, additional help text, picture
|
Office 2007
|
|
|
|
Our tooltip
|
|
Function call for this tooltip:
onmouseover="showTooltip('Simple tooltip with additioanl info','This is simple tooltip with additional info','Press F1 for more help','helpicon.png','graf.png')"
|
The script is not finished, I've put it only for demonstration, but if you find useful, feel free to grab source code.
The only thing I couldn’t copy was the gradient background, so I used something in between as background and put in variable tooltipBackColor (as you can see on screenshots I use black color scheme in Office 2007) .
How to use?
Just call function showTooltip() in onmouseover event and onmouseout call hideTooltip.
Sample:
<a href=”#” onmouseover="showTooltip('Caption’,'Tooltiptext')" onmouseout="hideTooltip()" />
What parameters can I use?
showTooltip (‘Caption’,’Tooltip text’,’Additional help text’,’Additional help image path’, ‘Main image path’)
Compatibility
Tested on: IE 6 & 7, Firefox 2, Opera 9.2, Safari 3 for Windows
Summary
This script is not finished yet, all comments, bug reports and suggestion are welcomed.
Download in 1 zip file
Demo page