Re: can any one help in tool tip for icons?

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
cake-php+unsubscribe@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php