Yii 1.1: jquery-tipsy

Generate simple Facebook-style tooltips using jQuery Tipsy plugin

Generate simple Facebook-style tooltips using jQuery Tipsy plugin.
I am not the developer for this jQuery plugin.
I only enhanced so that it can be use as a Yii extension.


Yii 1.1.7 or above, should work with other releases too


  • Extract the files under /protected/extensions
  • Use in the view, form

Example of Usage (with global settings):

$this->widget('application.extensions.tipsy.Tipsy', array(
  'fade' => false,
  'gravity' => 'n',
  'items' => array(
    array('id' => '.element_class'),
    array('id' => '#element_id'),
    array('id' => array('model' => $model, 'attribute' => 'model_attribute_name')
     ,'fallback' => 'Put custom tooltip here.' ),    

Example of Usage (with item specific settings):

$this->widget('application.extensions.tipsy.Tipsy', array(  
  'trigger' => 'hover',
  'items' => array(
    array('id' => '.element_class', 'fade' => false, 'gravity' => 'n',),
    array('id' => '#element_id', 'gravity' => 'sw'),
    array('id' => array('model' => $model, 'attribute' => 'model_attribute_name')
         ,'fallback' => 'Put custom tooltip here.' ,'trigger' => 'manual' ),    

When used with CGridView, add the following code:

$this->widget('zii.widgets.grid.CGridView', array( 
  'afterAjaxUpdate' => 'function(id,data){ initTipsy(); }',


  • delayIn (delay before showing tooltip (ms), [default: 0] )
  • delayOut (delay before hiding tooltip (ms), [default: 0] )
  • fade (fade tooltips in/out?, [default: false] )
  • fallback (fallback text to use when no tooltip text, [default: ''] )
  • gravity (gravity, [default: 'n'] )
  • html (is tooltip content HTML?, [default: false] )
  • offset (pixel offset of tooltip from element, [default: 0] )
  • opacity (opacity of tooltip, [default: '0.8'] )
  • title (attribute/callback containing tooltip text, [default: 'title'] )
  • trigger (how tooltip is triggered - hover | focus | manual, [default: 'hover'])



  • v1.0 - Initial Release
  • v1.1 - Update to Tipsy JS to v1.0.0a (#3723), Fixed exception issue (#3703), change default delayIn, delayOut to 50ms
  • Add link to GitHub project

Total 18 comments

#14353 report it
javad at 2013/08/05 10:13pm
two widgets in one page

@Marashi, it's don't work

#14328 report it
marashi at 2013/08/05 12:47am
two widgets in one page

@javad: Here is a sample:

$this->widget('application.extensions.tipsy.Tipsy', array(
  'fade' => false,
  'id' => 'yourUniqueIdPerWidget' // You should add this line
  'gravity' => 'n',
  'items' => array(
    array('id' => '.element_class'),
    array('id' => '#element_id'),
    array('id' => array('model' => $model, 'attribute' => 'model_attribute_name')
     ,'fallback' => 'Put custom tooltip here.' ),    

BTW, instead of using two widgets, you can simply put the widget in your parent page and use it in your both children pages.

#14327 report it
javad at 2013/08/05 12:12am
two widgets in one page

@Marashi, how do I do this

#14326 report it
marashi at 2013/08/04 11:55pm
two widgets in one page

@javad: You need to set two unique Ids for each widget as you are using both in one page!

#14301 report it
javad at 2013/08/03 03:20am
called two widgets in one page


I have a called Tipsy widget

Now once again I'm calling it, but it does not work the second time.

These two widgets are inside two separate files, But run in one page

#10374 report it
Nabi at 2012/10/24 01:05am

I suggested to you or update download link in here, or basically remove from it and refer user to github for download.

#8885 report it
shehzad ali at 2012/07/06 03:52am
Arrow Problem


  • get latest version of js and css file from forum page.

  • hopefully it will solve your problem

#8884 report it
onkar lal at 2012/07/06 03:14am
Arrow does not show ?

I am using this extension. All the things working fine but the arrow does not show for me. How to solve this issue.

#8774 report it
shehzad ali at 2012/06/26 04:15am
IE9 issue solved by replacing with latest JS and CSS file from authors github
  • i was having an issue with IE9, tooltip was appearing in top-left of screen when rendering the page in modal window.

  • nothing mentioned on this forum helped, so i just checked the github of the author and found there are updated on file https://github.com/jaz303/tipsy/tree/master/src

  • i replaced my files with updated files and issue is solved now.

Thanks for the extension.

#8354 report it
marashi at 2012/05/28 12:19pm
Do not download the attached files!

The attached files in this page are not working correctly. just download the latest versions from github.

#7247 report it
Fabio Giaffaglione at 2012/03/06 07:29pm
Works well, but...

Trigger Focus don't work. The arrows don't show up.

#6657 report it
semprul at 2012/01/25 07:58pm
Title and Focus

why the 'focus' trigger and title didn't work?

i just put this code on my view:

            $this->widget('application.extensions.tipsy.Tipsy', array(  
              'fallback' => 'Masukkan keterangan tambahan seperti peminjaman alat atau hal lain yang berhubungan dengan kegiatan',
              'trigger' => 'focus',
              'gravity' => 'w',
              'items' => array(
                array('id' => array('model' => $model, 'attribute' => 'ket')),    

thanks anyway

#6447 report it
Reolbox at 2012/01/11 07:15am
offset & arrow doesn't work

i see the tooltip, only i cannot offset it.

Also the arrow.gif doesn't show up.

#4069 report it
taiff at 2011/06/03 03:45am
Latest Tipsy JS+CSS source

Had posted on the forum here the latest JS + CSS from the original author. Just dump it in the appropriate and overwrite the old stuff.

The code would allow for the behavior as advertised by the author.

Thanks Kamal for the original port. :)

#3760 report it
Raoul at 2011/05/05 05:10pm
yes !

thanks kamarulismail .. I will download the last version and let you know ...

#3753 report it
Kamarul at 2011/05/04 10:55pm
Tipsy version 1.1

I already upgrade Tipsy to version 1.1. Thanks for all the comments and feedback. Especially to Raoul & thyseus. ^_^

#3723 report it
Raoul at 2011/05/02 04:47am
good but...

Once the bug found by thyseus is fixed, this extension works fine. However, it would have been nice to wrap the latest version of the tipsy plugin (1.0.0a) instead of version 0.1.7. I copy&paste your code sample and found that the 'sw' gravity is not working. It seems that only the latest version support composite gravity values like 'nw' for 'north-west' ... version 0.1.7 does not.

That's no big deal :

  1. download latest version from github repository
  2. replaces files

..and 'sw' works !!

One other little thing is default values set by the extension for 'delayIn' and 'delayOut'. IMHO 2.5 seconds is really too much ... why not set it to 0 instead ?

Maybe for the next version ? ;)

#3703 report it
thyseus at 2011/04/29 06:58am
Works well, but,...

Works well, but you have to mind one cornerstone:

1.) 'htmlOptions' MUST be set, otherweise you get a CException.

Here is a (for me) working example:

            Yii::app()->baseUrl.'/images/katalog.png', '', array(
            'id' => 'catalogue',
            'title' => 'Klicken Sie auf das Bild, um den Katalog herunter zu laden',
        Yii::app()->baseUrl.'/files/katalog.pdf', array(
$this->widget('application.extensions.tipsy.Tipsy', array(  
  'trigger' => 'hover',
  'items' => array(
    array('id' => '#catalogue', 'htmlOptions' => '', 'gravity' => 'sw'),

Thank you for this extension !

p.s. the Exception could be easily fixed by appending a @ at line 58 in Tipsy.php

Leave a comment

Please to leave your comment.

Create extension