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: ~~~ [html]
Link
This div has a tooltip when you hover over it!
##Advanced options
There are two possible options: the identifier and an options-array.
```php
$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](http://calebjacob.com/tooltipster/#options)).
right?
~~~
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'
);
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;
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
.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!
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!
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
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.
Re: Bug in default function values and a documentation edit
Thank you, DZ-015!
Yes, this was a copy&paste&dontthinkabout-bug. Fixed.
Two or more line?
How can i breake the lines in tooltipster?
I whant display 2 phone numbers, 1 phone number per row.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.