Custom MooTools Tooltips Download Files

Jake Hurst — Mon, 30 Mar 2009 12:57:50 +0000

I have put together a zip with the files that you need to get your custom MooTools tooltips going. If you want to know how to add these to you site just check out this post.

Download

Add custom MooTools tooltips to your site

Smart Mootools Tooltips

Jake Hurst — Sun, 24 Aug 2008 16:15:22 +0000

Tool tips with Mootools just got even more cooler! Check it out, its called Smart Hover Box. You can add a hover html elements to any other element by adding a single id.

Smart Hover Box Features:

create a hover box out of any html element
smart positioning will always show hover box in window quadrant with the most space
optional close button by adding a user defined class to any element
user defined x and y hover element offset
user defined timeout after mouseleave event

Link: http://www.consideropen.com/blog/2008/08/smart-hover-box-for-mootools-12/

Add custom MooTools tooltips to your site

Jake Hurst — Thu, 17 Apr 2008 09:09:40 +0000

I first saw this over at WPelements and loved it. So I decided to show you how I put together cool looking tooltips for one of my friends sites. Tooltips come in handy when you want to add a cool hover effect with information in a small box to links, content areas like posts and in this case thumbnail images.

Check out the demo from Mootools.net

You can download the files you need here: http://mootools.net/download

After you upload those files to your server you will then need to put this code into to your page in between the if you are using TMS or WordPress this will all be in the header.php file.

After you have done that you will need to add a class and title to the links or images you want to show the tooltip.

To do that you will have to add this class=”tips” title=”Big Title :: the description” to your links or images that you want to see the tooltip with.

Example link with the class and title in red:

class=”tips” title=”Big Title :: the description”>

The next part is to customize the look of the tooltip. We will do that with CSS. You will need to add this to your existing CSS style sheet.

.tool-tip {
float:left;
color: #BBB;
width: 265px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 13px;
margin: 0;
color: #FFF;
padding: 8px 8px 4px;
background: url(/images/tips.png) repeat;
border-bottom: 1px solid #FFF;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(/images/tips.png) repeat;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

I added a custom transparent PNG image. You can change that to a background color if you want.

Here is that tips.png, download it if you want and change it to the color you need. I used Fireworks to edit it.

Thats it, now you will have nice looking tooltips for your site.

DesignerFied.com » tooltips

Custom MooTools Tooltips Download Files

Smart Mootools Tooltips

Add custom MooTools tooltips to your site