Yii 1.1: tooltipster

Widget for using jQuery plugin "tooltipster"

This is just al wrapper for the awesome jQuery tooltipster plugin. Yes, you are right: this plugin will display nice tooltips :D

Wanna see a demo?

Wanna fork yii-tooltipster or tooltipster on github?


Yii 1.1 or above


Just call the widget once:


By default this will create a simple tooltip for every element with the class tooltipster:

<a href="http://www.yiiframework.com" class="tooltipster" title="This is my link's tooltip message!">
<div class="tooltipster" title="This is my div's tooltip message!"> 
    <p>This div has a tooltip when you hover over it!</p>

Advanced options

There are two possible options: the identifier and an options-array.


The identifier can be a css class or a id. Also you can use the options-array to submit all options tooltipster can work with (check the docs).

<a href="http://www.yiiframework.com" class="lolcat" title="This tooltip should be on the right side!">

Default options:

$_default_options = array(
        'functionBefore'=>'js:function(origin, continueTooltip) { continueTooltip(); }',
        'functionAfter'=>'js:function(origin) {}',


Total 8 comments

#19568 report it
oxido at 2015/09/10 04:27pm
Two or more line?

How can i breake the lines in tooltipster?

I whant display 2 phone numbers, 1 phone number per row.

#13025 report it
Yerlt at 2013/04/29 04:55am
Re: Bug in default function values and a documentation edit

Thank you, DZ-015!

Yes, this was a copy&paste&dontthinkabout-bug. Fixed.

#13015 report it
DZ-015 at 2013/04/28 11:51pm
Bug in default function values and a documentation edit

Thank you for the nice widget! The function options in the default values have to start with js: in order to be encoded correctly (i.e. without quotes). Otherwise they are encoded as string not function. The two corresponding lines in the widget $_default_options array have to be like this:

'functionBefore'=>'js:function(origin, continueTooltip) { continueTooltip(); }',
'functionAfter'=>'js:function(origin) {}',

Also I suggest that in the documentation js: has to be added if the user needs to define a custom function in the options array.

#11866 report it
Yerlt at 2013/02/08 08:54am
RE: Strange effect

Hi bluezed,

i just included this plugin and the code is untouchted. So i think you should ask questions like this on tooltipsters pages, like http://calebjacob.com/tooltipster/ or https://github.com/iamceege/tooltipster

But maybe you can check your html. Please try something like this:

<td class="first-column-odd">
<div class="my-tooltip" style="border:1px solid #000;" title="Some description">
    <b>My Row</b>

Maybe your div is just not big enough. Especially if it is empty :D

#11865 report it
bluezed at 2013/02/08 08:12am
Strange effect

Hi there,

first of all the extension is great! Just what I was looking for.

However, I've got a strange effect here...

I'm using this to call the widget:


Then I have a table and in one column each row has this <div>:

<td class="first-column-odd">
<div class="my-tooltip" title="Some description">
    <b>My Row</b>

The column in the table has a fixed width so next to most of the entries in the cells there is some free space.

Now when I move the mouse over the free space in a cell the tooltip appears but if I then move it, still within the same cell, over the text then the tooltip disappears. If I move it back into the text-free area the tooltip appears again.

Same thing happens the other way round as well. If I come into the cell onto the text the tooltip appears, move the mouse in the text-free area and the the tooltip disappears.

Is there something I can do through options?


#11595 report it
Sebastian at 2013/01/22 09:59am

Can you do something so that there is no .git directory in your extension's zip? I think it won't be of any use for anyone :).

PS: Extension works flawlessly. Great job!

#11571 report it
Yerlt at 2013/01/21 07:01am
Re: theme selection

Hello Thanasis,

i'm glad you like this extension!

The 'theme'-option won't load anything by default. It just sets a CSS class! Nothing else.

If you want to use themes, just copy the content from 'tooltipster-light.css' into 'tooltipster.css'.


#11570 report it
Thanasis Fotis at 2013/01/21 06:38am
theme selection

Thank you for this extension. I didn't know about tooltipster before, it's a great plugin. I have one feature request... if you pass eg

'theme' => '.tooltipster-light'

to the options so that tooltipster uses another theme, the file 'tooltipster-light.css' is not loaded automatically by the extension. Is it possible to implement this;

Leave a comment

Please to leave your comment.

Create extension