How to Display tooltp(qtip) on admin CGridview dynamic

You are viewing revision #5 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#6) »

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"=>"[b]viewallticket[/b]?even_id={$data["id"]}&date_id=  {$data["events_date_id"]}","class"=>"[b]tool_tip[/b]"))',
                        '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 [b]toolt_tip[/b](){
        $('a[.tool_tip][rel]').each(function()
                        {

                                $(this).qtip(
                                {
                                        content: {

                                                text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
                                                ajax: {
                                                        url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
                                                },
                                                title: {
                                                        text: 'Ticket - ' + $(this).text(), // Give the tooltip a title using each elements 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...