13
Create a ToolTip Effect for Your Theme Just Like WPelements.com
I have been receiving allot of email lately about the tool tip effect I use on WPelements.com. This is actually a very simple feature that can easily be implemented within any WordPress theme. I am partial to the mootools solution for tips, but most javascript tips can be implemented using the same method described below.
The first thing you need to do is grab your very own version of mootools as well as the tooltip class. To make things easier, I have packaged them both up here. Download and place these two files in your theme’s “scripts” folder. If you don’t currently use scripts within your theme, create a folder called “scripts” (or whatever you want to call it) in your theme folder including the downloaded scripts.
Add the Scripts
Now that you have the power, you need to tell your theme where to find it and when/how to call it out. Open your theme header.php file and place the the code below somewhere above the “</head>” tag.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo(’template_url’); ?>/scripts/tips.js"></script>
Basic WordPress Link Integration
Next thing you need to do is figure out where you want the tips to show up. I recommend against using theme for every link because they just tend to become overbearing (just my opinion). For the WPelements.com theme I simply needed a way to provide a short bit of info for each post thumbnail that had no visible text next to it. But you can pretty much add a tooltip automatically for any permalink or manually for any other link in your theme by using a combination of basic HTML and custom fields.
A very basic tooltip link structure looks like this:
<a href="www.somelink.com" class="thetip" title="The Tip Title :: The Tip Description">Your Link</a>
Pretty basic stuff… the class calls the script, and then you just use the link title to add the tooltip content. To take it one step further, let’s integrate the tooltip into a basic WordPress permalink for a post.
<a href="<?php the_permalink() ?>" class="thetip" title="<?php the_title() ?> :: <?php the_content_rss('', TRUE, '', 15); ?>"><?php the_title() ?></a>
In the example above, the tooltip will display the permalink title and the first few words of your post automatically. For the WPelements.com theme, I wanted a little more control over what was displayed within the tooltip, so I used a few custom fields to make things easier.
<a href="<?php the_permalink() ?>" class="thetip" title="<?php $key="shortname"; echo get_post_meta($post->ID, $key, true); ?> :: <?php $key="shortdesc"; echo get_post_meta($post->ID, $key, true); ?>"><img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title() ?>"/></a>
Add Some Style to Your ToolTip
The last thing you need to do is add a little CSS to your default theme stylesheet. Use the CSS below as a starter, but this is where you can really get creative. Use transparent png’s for the tip background, add rounded corners, change the font type and color, etc.
.tool-tip{
color:#444444;
width:250px;
z-index:13000;
}.tool-title{
font-weight:normal;
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
margin:0;
color:#343434;
padding:8px 8px 5px 8px;
background:url(images/tips-trans.png) top left;
text-align:left;
}
.tool-text{
font-size:12px;
padding:0 8px 8px 8px;
background:url(images/tips-trans.png) bottom right;
text-align:left;
}
13 Responses to “Create a ToolTip Effect for Your Theme Just Like WPelements.com”
Leave a Reply
June 17th, 2008 at 12:57 am
Jason - This is just what i was looking for!
You a mind reader now? lol
Thanks alot!
June 17th, 2008 at 6:43 am
@Dean… No problem, such an easy tutorial… didn’t think anyone would be interested.
June 17th, 2008 at 2:01 pm
I was wondering which files do we edit for the Basic link integration part. I know we have to edit the theme header.php and then the css stylesheet.
June 17th, 2008 at 3:36 pm
Nice of you to share! Let’s finish up the updates on TV.Elements
June 18th, 2008 at 1:30 am
Great work Jason, thanks very much.
I am guessing this is mootools1.1 Is that correct? Do you know if any major changes need to be made to make it work with the latest version of mootools?
I guess the same goes for your excellent featured content plug-in. I noticed there are a couple of questions about mootools1.2 in the smoothgallery forum but no answers so far. It would be great to hear your take on this.
June 18th, 2008 at 6:25 am
@Jed… I am working as fast as I can with the time that I have. I am pretty much having to rewrite portions of the theme to handle the related video functionality as well as adding standard blog post functionality. I am only one person, and clients take priority over theme updates.
June 18th, 2008 at 6:27 am
@Nell… Yep… I am aware of the updated version of mootools and am reworking several plugins and theme to match the latest version.
June 18th, 2008 at 10:44 am
How about I become your client to get it done
I ll let you finish your current projects with the clients then we go from there! I am sure that everyone will benefit the updates of TV.Elements. Thanks!
June 18th, 2008 at 9:27 pm
Is there a way to block the alt tag from popping up and blocking this?
July 4th, 2008 at 11:26 pm
Hi Jason and congratulations for your work.
As a beginner I am trying to W3 validate my site http://www.ideesvideo.fr (using Video Elements) and there is this note I don’t understand :
Line 90, Column 118: there is no attribute “Title” .
…/” class=”thetip” Title=”Example Title :: Your featured video de
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the “Strict” document type with a document that uses frames (e.g. you must use the “Transitional” document type to get the “target” attribute), or by using vendor proprietary extensions such as “marginheight” (this is usually fixed by using CSS to achieve the desired effect instead). (…)
Just thought it could be mentionned here because it seems that this code is part of the tooltip… What is your advise to make it validate ?
July 20th, 2008 at 9:08 am
Wow … u hv a great JS
Theres any other plugin that.’s ready for this … erm … if not mistake Bubble Tooltips …. i’ve used on my site … http://smileylover.com …
But anyway . this is still great …. Cheers 4 u
and nice template!!
July 22nd, 2008 at 8:29 pm
Perfect! Exactly what I was looking for while redesigning my site. Thanks for the article.
September 5th, 2008 at 7:03 am
Hello,
I’ve got a conflict with my Theme using Prototype.js librarie
could you send me an uncompressed version of your mootools.js file ? I would like to rewrite it.
thanks