Posted on

Jörn Zaefferer’s Tooltip Hacks

I added two settings variables to the plugin:

positionVar: boolean

appendElement: ‘#mydiv’

positionVar sets a condition of whether to use the calculated positioning or otherwise just use the positioning from the settings.

appendElement replaces the default body.document parameter for the appendTo function. Instead, we want to position the tooltip inside of an element with relative positioning so we can give it a ‘static’ position.

Now that the tooltip has been positioned precisely we can unbind and bind events to the tooltip and the container div. Add this below the tooltip initialization. (sorry for the narrow layout)


$('.toolTipPop').unbind('mouseout');
$('#container').bind('mouseout', function() { $('#tooltip').css("opacity", 0); });
$('#container').bind('mouseover', function() { $('#tooltip').css("opacity", 100); });

See example here
Make sure to escape your html characters in your title tag if you want to add links to the tooltip content.

Based on  Jörn Zaefferer’s jquery tooltip plugin.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Posted on

Remove Highlight from Safari Input Boxes on Focus

Even with a text field having a 0px border Safari still renders a glowing halo around text fields that are in focus. To remove this sometimes annoying feature use the following CSS:

input {
outline-style:none;
outline-width:0px;
}