jquery-tipsy Generate simple Facebook-style tooltips using jQuery Tipsy plugin

  1. Requirements
  2. Usage
  3. Setting/Option
  4. Resources
  5. Changelog

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
24 3
38 followers
2 282 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: Kamarul
Created on: Apr 29, 2011
Last updated: 6 years ago

Downloads

show all

Related Extensions