Yii 1.1: qtip2

Extension to easily use the javascript qtip plugin inside Yii
22 followers

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 :

<div class="row">
<?php echo $form->textField($model, 'email', array('title' => 'email field')); ?>
</div>

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

Total 17 comments

#19628 report it
amorangi at 2015/10/11 08:30pm
Fix E_STRICT

Move

public function __construct($params = array()) {
        foreach ($params as $p => $val) $this->$p = $val;
    }

to just under

class QTip extends CComponent {
    /**
     * @brief retrieve the script file name
     * @param minify bool true to get the minified version
     * 
     */

in order to prevent E_STRICT errors

#8752 report it
tom@cu at 2012/06/24 12:42pm
Re:Security?

/*! * jquery.qtip. The jQuery tooltip plugin If you open the JS file this is in the header. By the looks of it even though the extension is named Qtip2 its not based on ver. 2 of the plugin..

  • Copyright (c) 2009 Craig Thompson
  • http://craigsworks.com
  • Licensed under MIT
  • http://www.opensource.org/licenses/mit-license.php
  • Launch : February 2009
  • Version : 1.0.0-rc3
  • Released: Tuesday 12th May, 2009 - 00:00
  • Debug: jquery.qtip.debug.js */
#6642 report it
allain at 2012/01/24 10:19am
Security?

Can you please confirm that this extension is not bundling the compromised version of qtip?

Check the notice at the top: http://craigsworks.com/projects/qtip2/download/

#5640 report it
Roger Alexander at 2011/10/27 10:56pm
This don't show me the qtip

Excuse me people, i need help with this extension, i put this code in my view, but in the window do not show me the qtip that i want, I see the qtip default in the web browser.

Thanks for your help

#4144 report it
yiistarter at 2011/06/09 03:03am
Including in a module

Thanks for this. This was very helpful. But I wanted this to be included in my admin module which is in the protected/modules/admin

this did not worked as when I copy the content to

protected/modules/admin/extentions

You wil have to do the following code change in the Qtip.php to the "protected static function registerScript($scriptName)" the changed function is given below.

protected static function registerScript($scriptName) {
        $cs = Yii::app()->clientScript;
        $cs->registerCoreScript('jquery');
        $assets = dirname(__FILE__).DIRECTORY_SEPARATOR.'source';
        $aUrl = Yii::app()->getAssetManager()->publish($assets);
        $cs->registerScriptFile($aUrl.'/'.$scriptName);
    }

After this it will work no matter where you put it if you have configured the view correctly like below.

Yii::import('application.modules.admin.extensions.qtip.QTip');
// qtip options
$opts = array(
    'position' => array(
        'corner' => array(
            'target' => 'topRight',
            'tooltip' => 'bottomLeft'
            )
        ),
    'show' => array(
        'when' => array('event' => 'mouseover' ),
        'effect' => array( 'length' => 300 )
    ),
    'hide' => array(
        'when' => array('event' => 'mouseout' ),
        'effect' => array( 'length' => 500 )
    ),
    'style' => array(
        'color' => 'black',
        'name' => 'blue',
        'border' => array(
            'width' => 1,
            'radius' => 3,
        ),
    )
);
 
// apply tooltip on the jQuery selector (1 parameter)
QTip::qtip('.row a[title]', $opts);

Many Thanks

#3731 report it
Parcouss at 2011/05/02 03:43pm
qtip2

Hi,

The name qtip2 was taken because there were an extension called qtip in yii but with nothing downloadable... I tried to contact the author but get no responses so I decided to write it... That's the reason of the '2'. But it seems the qtip empty extension doesn't exist anymore.

When qtip 2.0 (javascript) will be available as a stable version, I may update this extension if I have some time !

#3724 report it
Raoul at 2011/05/02 06:28am
QTip2

Hi, Thanks for this extension.

One question : how come it is called QTip2 when the underlying qTip JQuery plugin is in version 1.0 ? Do you plan to release an update when qTip 2.0 is available ?

Thanks

#3439 report it
gawronzo at 2011/04/13 04:22am
Qtip & CListView & ajax requests

Hi,

I have a problem how put to work Qtip extension with CListView widget updated by ajax requests. Qtip shows only on the first page and disappears when I click at widget's sorting or pagination link. Thanx in advance for any help ...

#3132 report it
Trejder at 2011/03/19 05:43am
COutputProcessor

Hi, I KNOW that qtip is not using COutputProcessor and this is also very strange situation for me! :) I don't comply your extension as I believe it is superb! :) I'm just saying that I wasn't able to test it, because it is not working for me and I was asking, if anyone else had similar problems / experience. But seems I'm the only one here with this stuff. Cheers and thanks! :)

#3131 report it
Parcouss at 2011/03/19 05:09am
hi trejder,

COutputProcessoris a class provided by the Yii framework and not used in the QTip script. I don't know what's happening, but that's nothing to do with this plugin which works pretty well.

#3126 report it
Trejder at 2011/03/18 05:59am
Is this extension usable at all?

Hi there. Is this extension finished and working? I extracted ZIP file to extension folder and pasted example code from this page to one of my views, and I'm getting error saying: "**Fatal error: Class 'COutputProcessor' not found in [path]\protected\extensions\qtip\QTip.php on line 57***".

I have no bloody idea what is going on or what is this error message talking about as neither QTip nor my application is using COutputProcessor anywhere in the code.

#2633 report it
macinville at 2011/01/24 07:34am
RE: i need help . i'm get "Redefining already defined constructor for class QTip" message

@ghadad,

I solved the problem by removing E_STRICT in php.ini.

#2548 report it
ghadad at 2011/01/16 04:07pm
i need help . i'm get "Redefining already defined constructor for class QTip" message

i put the code above in the view file , but get the error . any idea ? Thanks

#2524 report it
Junior - df9 at 2011/01/13 06:03pm
Many thanks

excellent extension!

thanks!

#2155 report it
cma at 2010/11/19 04:22am
Solve ie trouble

A fork version solve ie problem : tip displaying, box resizing.. https://github.com/dustmoo/qtip

#2144 report it
cma at 2010/11/17 06:59pm
Dynamic content solution

Cool plugin, thanks

I needed to use the Content option in order to get dynamic & contextual content. I put qTip on some labels, I call QTip this way : QTip::qtip('label.qtip', $opts);. In $opts[], I tryed to use this :

$opts = array(
    ...
    'content' => array(
      'text'=>'.................. ie size fix .................... as always........',
      'url'=>$this->createUrl( $this->getId().'/helpForField'),
      'data'=>array( 'target'=> 'js:$(this).attr(\'for\')' , ),
      'method'=>'get',
    ),
    ...
);

But it doesn't work because "this" isn't usable in content=>data... I overcomed this problem with the following modification in the QTip::qtip method

Yii::app()->clientScript->registerScript(__CLASS__.$jsSelector, '$("'.$jsSelector.'").each(function(){$(this).qtip('.CJavaScript::encode($options).')});');
#1936 report it
Antonio Ramirez at 2010/10/17 09:36pm
Great Plugin

Thanks,

Very good plugin. I recommend you change the information of the INSTALL file as it says that we have manually add the JS files and you do that on your code very well.

Also, when unzipping the contents If we include them into the extensions directory under qtip; your reference goes to ext.qtip.qtip which fails at first if you don't double check it.

One more thing: even though the docs said that it is better suited with jquery.1.3 it works quite well with 1.4 too...

Good work... thanks again

Leave a comment

Please to leave your comment.

Create extension
Downloads