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