Custom Tooltips using YUI

Note: You can hit ESC to close all popBox's

On Rollover

Exampel 1.
Anchor class popBoxOnRollOver No Style with href as Image

 

<a class="popBoxOnRollOver" rel="popbox" title="The Header::The Title" href="/Example.gif" target="_blank">Hover Here</a>
Exampel 2.
Anchor class popBoxOnRollOver No Style with href as link and image using # seperator

 

<a class="popBoxOnRollOver" rel="popbox" title="The Header::The Title::Link Title" href="http://www.zenjoomla.com/#/Example.gif" target="_blank">Hover Here</a>
Exampel 3.
Anchor class popBoxOnRollOver using Style Content with Sound

Anchor class popBoxOnRollOver using Style Content with Sound no rel tag

 

<a class="popBoxOnRollOver" rel="mySoundPageWider" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Hover Here</a>

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox|trackid:mySoundPageWider';" href="/Example.png" target="_blank">Hover Here</a>

On Click

Exampel 4.
Anchor class popBoxOnClick using Style Content with link and image

 

<a class="popBoxOnClick" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="#" target="_blank">Click Here</a>
Exampel 5.
Anchor class popBoxOnClick with Sound and Tooltip

 

<a class="popBoxOnClick soundOnClick hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 6.
Anchor class slimbox replacement

 

<a class="slimbox" rel="lightbox" title="The Header::The Title::Link Title" href="/Example.png" target="_blank">Click Here</a>

On Click Browser


Exampel 7.
Anchor class popBoxOnClick Effect popBoxBrowser

 

<a class="popBoxOnClick" title="The Header::The Title::Link Title" style="content: 'lsrc:http://developer.yahoo.com/yui/|width:800px|height:400px|fx:popboxbrowser';" href="http://developer.yahoo.com/yui/" target="_blank">Click Here</a>
Exampel 8.
Anchor class popBoxOnClick Effect popBoxBrowser

 

<a class="popBoxOnClick" title="The Header::The Title::Link Title" style="content: 'lsrc:http://developer.yahoo.com/yui/|width:95%|height:95%|fx:popboxbrowser';" href="http://developer.yahoo.com/yui/" target="_blank">Click Here</a>
Exampel 9.
Please View My Photo Gallery

 

<a class="soundOnClick popBoxOnClick yui-tip" href="#" title="The Header::The Title::Link Title" style="content: 'lsrc:http://domain.com|width:620px|height:470px|fx:popboxbrowser|soundid:mySoundApplause';" >Click Here</a>
Exampel 10.

 

<button class="popBoxOnClick" title="The Header::The Title::Link Title" style="content: 'lsrc:http://domain.com|width:620px|height:470px|fx:popboxbrowser|soundid:mySoundApplause';" >Click Here</button>

Exampel 11.
Div class hasTip or yui-tip using Style Content

 

<div class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</div>
Exampel 12.
SPAN class hasTip or yui-tip using Style Content

 

<span class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</span>
Exampel 13.

 

<button class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</button>
Exampel 14.

 

<input class="hasTip" type="button" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" />
Exampel 15.
The Header::The Title::Link Title

 

<a class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 16.
hasTip No Title

 

<a class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 17.
hasTip Single Title

 

<a class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 18.
hasTip Header and Title

 

<a class="hasTip" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 19.
Using a Flickr as thumbnail

 

<a class="showThumbnail" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 20.
Link as Thumbnail

 

<a class="showThumbnail" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 21.
Link as slimbox

 

<a class="slimbox" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 22.
Link as popBoxOnRollOver

 

<a class="slimbox" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 23.
Link as popBoxOnClick

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 24.
Image No Tip Alt Tag

 

<img title="The Header::The Title::Link Title" alt="Alt Tag" style="content: 'isrc:Image.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" src="Image.png" />
Exampel 25.
Image hasTip Alt Tag

 

<img class="hasTip" title="The Header::The Title::Link Title" alt="Alt Tag" style="content: 'isrc:Image.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" src="Image.png" />
Exampel 26.
hasTip no href
My Tooltip Link

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>

Exampel 27.
hasTip and href
My Tooltip Link

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:Image.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="Image.png" target="_blank">Click Here</a>

Exampel 28.
Link No Class
My Tooltip Link

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:Image.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="Image.png" target="_blank">Click Here</a>

Exampel 29.
The Header::The Title::Link Title

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:Image.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 30.
The Header::The Title::Link Title

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:Image.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>
Exampel 31.


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

 

<a class="popBoxOnRollOver" title="The Header::The Title::Link Title" style="content: 'isrc:/Example.png|lsrc:http://www.zenjoomla.com/|fx:popbox';" href="/Example.png" target="_blank">Click Here</a>