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.
Requirements ¶
Yii 1.1.7 or above, should work with other releases too
Usage ¶
- Extract the files under /protected/extensions
- Use in the view, form
Example of Usage (with global settings):
<?php
$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):
<?php
$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:
<?php
$this->widget('zii.widgets.grid.CGridView', array(
...
'afterAjaxUpdate' => 'function(id,data){ initTipsy(); }',
...
?>
Setting/Option ¶
- 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'])
Resources ¶
Changelog ¶
- 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
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:
CHtml::link( CHtml::image( 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
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 :
..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 ? ;)
Tipsy version 1.1
I already upgrade Tipsy to version 1.1.
Thanks for all the comments and feedback.
Especially to Raoul & thyseus. ^_^
yes !
thanks kamarulismail .. I will download the last version and let you know ...
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. :)
offset & arrow doesn't work
i see the tooltip, only i cannot offset it.
Also the arrow.gif doesn't show up.
Title and Focus
why the 'focus' trigger and title didn't work?
i just put this code on my view:
<?php $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( 'title'=>'Hello', array('id' => array('model' => $model, 'attribute' => 'ket')), ), )); ?>thanks anyway
Works well, but...
Trigger Focus don't work.
The arrows don't show up.
Do not download the attached files!
The attached files in this page are not working correctly. just download the latest versions from github.
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.
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.
Arrow Problem
@onkar,
get latest version of js and css file from forum page.
hopefully it will solve your problem
update!
I suggested to you or update download link in here, or basically remove from it and refer user to github for download.
called two widgets in one page
Hey
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
two widgets in one page
@javad: You need to set two unique Ids for each widget as you are using both in one page!
two widgets in one page
@Marashi, how do I do this
two widgets in one page
@javad: Here is a sample:
<?php $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.
two widgets in one page
@Marashi, it's don't work
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.