Comments on: Colortip – a jQuery Tooltip Plugin

By: pete

pete — Thu, 05 Apr 2012 16:43:09 +0000

These tooltips don't work properly in FF11. If you have them in a div that overlaps another, or have the tooltips attached to images in said div, the tooltips will appear behind the images next to it. Z-index doesn't work to change this.

I think it could be because I have a ulist where the li elements are displayed horizontally using display: inline and no-style, and maybe this messes up the display/parent-child relationship.

By: Drew

Drew — Tue, 24 May 2011 20:14:56 +0000

Hello,

I added a color scheme for 'silver'. While it requires CSS3 for the full effect, it degrades decently, and looks good.

Add the following lines to colortip-1.0jquery.css:

.silver .pointyTip { display:none; }
.silver .pointyTipShadow { display:none; }
.silver .colorTip {
color:#333;
font:10px arial;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #e5e3ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e5e3ee));
background: -webkit-linear-gradient(top, #fefefe 0%,#e5e3ee 100%);
background: -o-linear-gradient(top, #fefefe 0%,#e5e3ee 100%);
background: -ms-linear-gradient(top, #fefefe 0%,#e5e3ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#E5E3EE',GradientType=0 );
background: linear-gradient(top, #fefefe 0%,#e5e3ee 100%);
padding:5px;
-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px; border:1px solid #696969;
box-shadow:2px 2px 3px #696969; -moz-box-shadow:2px 2px 3px #696969; -webkit-box-shadow:2px 2px 3px #696969;
}

Then modify line 9 of colortip-1.0-jquery.js to this:
var supportedColors = ['red','green','blue','white','yellow','black','silver'];

Now silver becomes one of your coloration options.

By: Umar

Umar — Sat, 05 Mar 2011 19:55:22 +0000

another excellent tutorial .. great works guys

By: Giacomo

Giacomo — Wed, 12 Jan 2011 11:52:14 +0000

thanx for sharing, Joost! I had the same problem wiht a wordrpess theme and the prettyphoto plugin. Now, it works!

By: Ken Pendergast

Ken Pendergast — Tue, 14 Dec 2010 14:45:37 +0000

I am implementing this on a wordpress theme and not running into any conflicts right now but I am still in an early development stage.

Will using the .noConflict serve as a QA mechanism if I add it to avoid future issues?

By: Zach

Zach — Mon, 06 Dec 2010 16:57:15 +0000

Hey there,

You may be having a jQuery library conflict...I've had this problem before. Sometimes, especially on platforms like WordPress, you have to include the $.noConflict(); function to compensate. Check out: http://api.jquery.com/jQuery.noConflict/

By: ZH CEXO

ZH CEXO — Sun, 05 Dec 2010 08:36:16 +0000

I add some hacks so this plugin can work with IE6, and I think my code is simpler than @Sirus'
.pointyTip,.pointyTipShadow{
/* Setting a thick transparent border on a 0x0 div to create a triangle */
border:6px solid transparent;
_border:6px solid #123456; /*use a specific color for using chroma filter*/
bottom:-12px;
height:0;
left:50%;
margin-left:-6px;
position:absolute;
width:0;
font-size:0; /*empty tags have height in IE6, set font-size:0 to remove the height*/
_filter:chroma(color=#123456); /*chroma filter, #123456 changes to transparent*/
}
.pointyTipShadow{
/* The shadow tip is 1px larger, so it acts as a border to the tip */
border-width:7px;
bottom:-14px;
_bottom:-15px; /*fix the position in IE6*/
margin-left:-7px;
}

.colorTipContainer{
position:relative;
text-decoration:none !important;
_zoom:1; /*use this so .pointyTip,.pointyTipShadow{left:50%} works, but I don't know why, sigh~*/
}

By: Michael

Michael — Sun, 28 Nov 2010 21:27:06 +0000

@Martin,

Great work. I love the programming abstraction that you used to create this. I used to use mb_toolip (another jQuery tooltip plug-in), but this is cleaner and easier to modify. Thanks tons.

By: rufhausen

rufhausen — Thu, 02 Sep 2010 17:28:40 +0000

Looks like the tag I included got stripped out. The tag in question is "input".
Thanks.

By: rufhausen

rufhausen — Thu, 02 Sep 2010 17:27:00 +0000

I'm able to get this to work with every any HTML tag I've tried except , which is the one I really need it for. Am I missing something, or is this just not supported for some reason?
Thanks.