Difference between #6 and #7 of
How to Display tooltp(qtip) on CGridview dynamic

Revision #7 has been created by softark on Jul 23, 2013, 3:56:14 PM with the memo:

Reformatted the code for better readability.
« previous (#6) next (#8) »

Changes

Title unchanged

How to Display tooltp(qtip) on CGridview dynamic

Category unchanged

Tips

Yii version unchanged

Tags unchanged

tooltip, ajax, admin, cgridview

Content changed

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...
0 0
4 followers
Viewed: 9 993 times
Version: Unknown (update)
Category: Tips
Written by: Ankit Modi
Last updated by: softark
Created on: Jul 22, 2013
Last updated: 4 years ago
Update Article

Revisions

View all history