sammaye/yii2-qtip

qtip plugin for the Yii2 framework

dev-master 2014-03-25 11:57 UTC

BSD-3-Clause

• Sammaye

• jquery
• extension
• yii2
• yii2-extension
• sammaye
• Yii2 Extension
• qtip

README

A Yii2 qtip Plugin: http://qtip2.com/

This plugin currently deals with hooking qtip onto elements.

Usage of this plugin is really simple. Let's take an example:

\sammaye\qtip\Qtip::widget([
    'hook' => '.what_does_this_mean',
    'content' => [
        'text' => new JsExpression("function(api){
            var caption = $(this).data('caption');
            return '<p style=\'font-size:13px; line-height:17px; margin:0;\'>'+caption+'</p>';
        }")
    ],
    'style' => [ 'classes' => 'ui-tooltip-shadow ui-tooltip-light' ],
    'position' => [
        'my' => 'bottom center',
        'at' => 'top center'
    ]
]);

Now there are in reality only two widget properties, one being hook and the other being options. All of the other properties you see here such as content, style and position are all being magically added to the options property to be JSON encoded directly into the qtip plugins constructor in JavaScript.

This means that in order to understand how to use this plugin you only need to know what hook is. hook denotes the element for which a tooltip will appear for. An example of this would be:

<a href="#" class="what_does_this_mean" data-caption="The publisher has decided not to proceed with the publication of this book.">Details</a>

This would make it so that a tooltip containing the data-caption content would appear when the user hovers over this link, essentially this example in JS would be (and the plugin echos):

$('.what_does_this_mean').qtip({
    "content":{
        "text":function(api){
            var caption = $(this).data('caption');
            return '<p style=\'font-size:13px; line-height:17px; margin:0;\'>'+caption+'</p>';
         }
    },
    "style":{
       "classes":"ui-tooltip-shadow ui-tooltip-light"
    },
    "position":{"my":"bottom center","at":"top center"}
});

On how to use all the components of this plugin (due to its transparent nature) please refer to the qtip documentation: here.

Please file all issues on GitHub issues.