Yii 1.1: jquery-ui-tooltip-widget

Very simple JUI Tooltip pluggin wrapper (js lib is built in Yii 1.1.13)

This widget wraps jQuery UI tooltip, which comes in shipped with Yii 1.1.13 (latest jQuery UI version): http://jqueryui.com/tooltip/


Works directly with Yii 1.1.13, for older version you have to include latest jQuery UI libraries yourself.


If you add the extension in /application/protected/extensions/juitip/EJuiTooltip.php you can use it like this:

Yii::import('application.extensions.juitip.EJuiTooltip', true);
$this->widget('EJuiTooltip', array('selector' => '.tooltip'));

This way all links that have "tooltip" class and have "title" attribute will start displaying tooltips on hover containing the content of the "title" attribute. For more options check: http://jqueryui.com/tooltip/


Total 3 comments

#15952 report it
Minds Winding at 2014/01/03 05:16am
How Use

This is my example:

$this->widget('application.extensions.EJuiTooltip', array(
                'selector' => '.tool-tip', 
                                'hide' => array(
                                        'effect' => 'fade',
                                        'duration' => 500
                                'show' => array(
                                                'effect' => 'bounce',
                                                'duration' => 1000
                                'position' => array(
                                        'my' => 'center bottom',
                                        'at' => 'center top-5',
                                 'track' => false, //Seguimiento del tooltip al puntero
#15789 report it
Mutyi at 2013/12/17 04:40am
How do I customize the tooltip?

Very nice extention.Thanks for that. I have a question which has rather to do with my week programming skills: How and where can I change color/background color of the tooltip or change the font? I tryed this

 $this->widget('application.extensions.juitooltip.EJuiTooltip',array(     'selector'=>'.tooltip', tooltip
'scope'=>'myScope', 'background'=>'yellow', ), ));

but nothing happens. I also tryed to make the same change in the "custom-tooltip-styling.css" file with no success!

Can please any body help? A code example of customization will be very nice. Thanks.

#14234 report it
marcovtwout at 2013/07/29 06:04am

Excellent, should be in core.

Leave a comment

Please to leave your comment.

Create extension