Add mouse over Tool tip box to text in WordPress posts

Want to add more usefulness along with style using mouse-over tool tip boxes? You can easily add pop-up tool tip text box for any text content or links within WordPress posts using “WordPress Tooltip” plugin. It makes implementing this jazzy looking feature a very simple routine.

‘WordPress Tooltip’ for stylish tip box on mouse-over

1. Install WordPress Tooltip plugin on your blog and activate it. Now open any WordPress post (new or existing one), you should see new tooltip button on the editor toolbar.

2. Select text in post editor and click on the tooltip button. In the pop-up box type: tooltip content, text and URL for the selected text. This will automatically add tooltip (mouse-hover) box for selected text in the blog post.

3. Alternatively, you can use manual method for adding tooltip box to posts of your WordPress blog. Just goto HTML mode of the post editor and paste following text.

[cc]
[tooltip content=”This will show in a tooltip” url=”This will make tooltip a link”]Hover over me for tooltip[/tooltip]
[/cc]

Above you can change and customize: selection text, text to be displayed in tooltip box and linked URL. For sure a quick and easy way to add style to specific links or text within WordPress posts and even display extra text information within pop-up box.

Manual CSS code for showing tool tip text

If you want simple tool tip box, it can be implemented using few lines of CSS code. End result is simple yet funtional tool tip box while mouse hover of text. Add following code style.css file.

[cc]
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
[/cc]

Then add following to HTML of post editor at specific place within post where you want to display the tooltip text.

[cc]
TooltipThis is the crazy little Easy Tooltip Text.
[/cc]

Should work in latest version of Internet Explorer, Safari, Firefox and Opera web browsers.  Also, with further customization of CSS code you can change font style, font size and much more. Credit kollermedia