qtip2 Extension to easily use the javascript qtip plugin inside Yii

  1. Documentation
  2. Change Log

This extension is provided to easily use the Javascript plugin qTip. There was another extension like this, but without available downloads, so I wrote this extension, and named it qtip2.

You can see qTip home page.

Documentation

Requirements
  • Yii 1.0 or above
Installation
  • Extract the release file under protected/extensions
Usage

See the following code example:

Yii::import('ext.qtip.QTip');

// qtip options
$opts = array(
	'position' => array(
		'corner' => array(
			'target' => 'rightMiddle',
			'tooltip' => 'leftMiddle'
			)
		),
	'show' => array(
		'when' => array('event' => 'focus' ),
		'effect' => array( 'length' => 300 )
	),
	'hide' => array(
		'when' => array('event' => 'blur' ),
		'effect' => array( 'length' => 300 )
	),
	'style' => array(
		'color' => 'black',
		'name' => 'blue',
		'border' => array(
			'width' => 7,
			'radius' => 5,
		),
	)
);

// apply tooltip on the jQuery selector (1 parameter)
QTip::qtip('.row input[title]', $opts);

If then you have something like this in your view : ~~~ [html]

<?php echo $form->textField($model, 'email', array('title' => 'email field')); ?> ~~~ The field email will have a tooltip with the content 'email field'. (This a qtip trick : the default content is the content of the title attribute)

Another way to use it, is to create an instance of QTip and then add it to a widget or a selector. With this method, you can create globals parameters and merge whith specifics one :

Yii::import('ext.qtip.QTip');

// create a widget
$pg = $this->widget('zii.widgets.jui.CJuiProgressBar', array(
    'value'=>75,
    // additional javascript options for the progress bar plugin

    'htmlOptions'=>array(
        'style'=>'height:20px;'
    ),
));

// create the qtip object
$qtip = new QTip(array(
	'options' => array(
		'content' => 'A nice progress bar',
		'position' => array(
			'corner' => array(
				'target' => 'topMiddle',
				'tooltip' => 'bottomLeft'
			)
		)
	)
));

// call the method to set the tooltip, and pass specific parameters
$qtip->addQTip($pg, array(
	'style' => array('tip' => 'bottomLeft', 'name' => 'dark')
));

See the qTip documentation for all available qTip options.

Change Log

September 15, 2010
  • Initial release.
    September 16, 2010 (version 1.1)
  • Removed Behavior part. That was a bad idea.
  • can add to a widget
  • can merge options
16 0
22 followers
1 808 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Tags:
Developed by: Parcouss
Created on: Sep 15, 2010
Last updated: 13 years ago

Downloads

show all