How to Display tooltp(qtip) on CGridview dynamic

Tips

tooltip, ajax, admin, cgridview

Hi Friends, How to display the tooltip using ajax in admin gridview.. **1)** First write a code on admin.php
 
 
```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
 
```php public function actionviewallticket(){    // write a code here..... } ``` **3)** Finally call the js on admin.php file
 
 

```php
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" />
 
 
```php <script> $(document).ready(function() {      toolt_tip(); });
 
function [b]toolt_tip[/b](){      $('a[.tool_tip][rel]').each(function()
 
                        {
 
 
                                $(this).qtip(
 
                                {
 
                             {
 
        $(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             url: $(this).attr('rel')
 
},                                  title: {                                     text: 'Ticket - ' + $(this).text(), // Give the tooltip a title using each elements text                                     button: true
 
                                                }
 
                                        },
 
                                        position: {
 
                                                at: 'bottom center', 
 
                                text: 'Ticket - ' + $(this).text(), 
 
                    button: true
 
                }
 
            },
 
            position: {
 
                at: 'bottom center', 
 
my: 'top center',                                  viewport: $(window),                                 effect: false 
 
                                        },
 
                                        show: {
 
                                effect: false 
 
            },
 
            show: {
 
event: 'click',                                  solo: true                             },
 
                                        hide: 'unfocus',
 
                                        style: {
 
                                                classes: 'qtip-wiki qtip-light qtip-shadow'
 
                                        }
 
                                        
 
                                })
 
                        })
 
                    },
 
            hide: 'unfocus',
 
            style: {
 
                classes: 'qtip-wiki qtip-light qtip-shadow'
 
            }
 
        })
 
    })
 
.click(function(event) { event.preventDefault(); }); } </script> ```
 
 
Hope it will be helpful...