tooltipster Follow @yiiframework

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?

Requirements ¶

Yii 1.1 or above

Usage ¶

Just call the widget once:

$this->widget('ext.tooltipster.tooltipster');

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!">
    Link
</a>
 
<div class="tooltipster" title="This is my div's tooltip message!"> 
    <p>This div has a tooltip when you hover over it!</p>
</div>

Advanced options ¶

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

$this->widget('ext.tooltipster.tooltipster',
          array(
            'identifier'=>'.lolcat',
            'options'=>array('position'=>'right')
));

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!">
    right?
</a>

Default options: ¶

$_default_options = array(
        'animation'=>'fade',
        'arrow'=>true,
        'arrowColor'=>'',
        'content'=>'',
        'delay'=>'200',
        'fixedWidth'=>'0',
        'functionBefore'=>'js:function(origin, continueTooltip) { continueTooltip(); }',
        'functionAfter'=>'js:function(origin) {}',
        'icon'=>'(?)',
        'iconTheme'=>'.tooltipster-icon',
        'iconDesktop'=>false,
        'iconTouch'=>false,
        'interactive'=>false,
        'interactiveTolerance'=>'350',
        'offsetX'=>'0',
        'offsetY'=>'0',
        'onlyOne'=>true,
        'position'=>'top',
        'speed'=>'350',
        'timer'=>'0',
        'theme'=>'.tooltipster-default',
        'touchDevices'=>true,
        'trigger'=>'hover'
    );

Resources ¶

Total 7 comments

#13025

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

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

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>
</div>
</td>

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

#11865

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:

$this->widget('ext.tooltipster.tooltipster',
          array(
            'identifier'=>'.my-tooltip',
            'options'=>array('position'=>'top-left',
                    'delay'=>10,
                    'fixedWidth'=>300,
                    'speed'=>200,)
    ));

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>
</div>
</td>

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?

Cheers!

#11595

Sebastian at 2013/01/22 09:59am

.git

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

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'.

Greetings

#11570

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;

Please login to leave your comment.