How to Display tooltp(qtip) on CGridview dynamic

4 followers

This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.

Hi Friends,

How to display the tooltip using ajax in admin gridview..

1) First write a code on admin.php

array(
    'name' => 'Ticket Status',
    'type' => 'raw',
    'value' => 'CHtml::link($data["view"],
        CHtml::normalizeUrl("javascript:void(0)"),
        array(
            "id" => "'.rand(0,999999).'",
            "rel" => "viewallticket?even_id={$data["id"]}&date_id= {$data["events_date_id"]}",
            "class" => "tool_tip",
        )
    )',
    'htmlOptions' => array('width' => '100px'),
),

2) Create the viewallticket action on your controller

public function actionviewallticket(){
    // write a code here.....
}

3) Finally call the js on admin.php file

<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" />
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<script>
$(document).ready(function()
{
    toolt_tip();
});
 
function toolt_tip(){
    $('a[.tool_tip][rel]').each(function() {
        $(this).qtip({
            content:{
                text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
                ajax: {
                    // Use the rel attribute of each element for the url to load
                    url: $(this).attr('rel')
                },
                title: {
                    // Give the tooltip a title using each elements text
                    text: 'Ticket - ' + $(this).text(), 
                    button: true
                }
            },
            position: {
                at: 'bottom center', 
                my: 'top center',
                viewport: $(window), 
                effect: false 
            },
            show: {
                event: 'click',
                solo: true 
            },
            hide: 'unfocus',
            style: {
                classes: 'qtip-wiki qtip-light qtip-shadow'
            }
        })
    })
    .click(function(event) { event.preventDefault(); });
}
</script>

Hope it will be helpful...

Total 1 comment

#14254 report it
trond at 2013/07/30 06:55am
Demo link please

I had to do some Googling to find out what tooltp was all about. A demo link to demonstrate this would be nice.

Leave a comment

Please to leave your comment.

Write new article