jquery-tipsy Follow @yiiframework

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.

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

Total 13 comments

#10374

Nabi at 2012/10/24 01:05am

update!

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

#8885

shehzad ali at 2012/07/06 03:52am

Arrow Problem

@onkar,

get latest version of js and css file from forum page.
hopefully it will solve your problem

#8884

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

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

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

Fabio Giaffaglione at 2012/03/06 07:29pm

Works well, but...

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

#6657

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:

<?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

#6447

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

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

Raoul at 2011/05/05 05:10pm

yes !

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

#3753

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

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 :

download latest version from github repository
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

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:

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

Please login to leave your comment.