Hi there,

I use tooltips for input boxes, you can use the same format on your links.

*The view:
-------------*

> <?php echo $form->input('location', array('label' => 'Location','title' =>
> 'location', 'after' => '<div id="tooltip" class="tooltip_location">Please
> specify where this blind is going to be fitted, for example "Lounge".<span
> class="pointer"></span></div>')); ?>
>

*The css:
------------*

> #tooltip {
>     display: none;
>     border: 1px solid #9bcee6;
>     padding: 10px 12px;
>     background-color: #dcf5ff;
>     z-index: 5;
>     position: absolute;
>     left: 300px;
>     margin-top: -40px;
>     width: 300px;
> }
>
> #tooltip .pointer {
>     position: absolute;
>     left: -10px;
>     top: 5px;
>     width: 10px;
>     height: 19px;
>     background: url('/img/pointer.gif') left top no-repeat;
> }
>
> #tooltip.tooltip_notes {
>     margin-top: -80px;
> }
>

*the jquery code
----------------------*

> $(document).ready(function(){
>     $('input, select, textarea').focus(function(){
>         $class = $(this).attr('title');
>         $width = $(this).width() + 80;
>         $('.tooltip_' + $class).css('left', $width);
>         $('.tooltip_' + $class).fadeIn(500);
>     });
>
>     $('input, select, textarea').blur(function(){
>         $class = $(this).attr('title');
>         $width = $(this).width() + 80;
>         $('.tooltip_' + $class).css('left', $width);
>         $('.tooltip_' + $class).fadeOut(500);
>     });
>
> });
>

You should edit the jquery to focus on the a tag as well.
My pointer image is attached.

-- 
Kind Regards
 Stephen @ NinjaCoderMonkey

 www.ninjacodermonkey.co.uk

-- 
Our newest site for the community: CakePHP Video Tutorials 
http://tv.cakephp.org 
Check out the new CakePHP Questions site http://ask.cakephp.org and help others 
with their CakePHP related questions.


To unsubscribe from this group, send email to
[email protected] For more options, visit this group at 
http://groups.google.com/group/cake-php

<<attachment: pointer.gif>>

Reply via email to