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

unchanged
Title
How to Display tooltp(qtip) on CGridview dynamic
unchanged
Category
Tips
unchanged
Tags
tooltip, ajax, admin, cgridview
changed
Content
Hi Friends,

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

**1)**First**1)** First write a code on admin.php



~~~
[php]
array(
                        'name''name' => 'Ticket
Status',
                        'type'
    'type' => 'raw',
                        'value'
    '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'
        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


~~~
[php]

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

**3)**Finally**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"
/>
<script type="text/javascript"
src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
~~~




~~~
[php]
<script>
$(document).ready(function()
{
        toolt_tip()toolt_tip();
});


function [b]toolt_tip[/b](){
        $('a[.tool_tip][rel]').each(function()
                        {

                                $(this).qtip(
                                {
                                        content:function toolt_tip(){
    $('a[.tool_tip][rel]').each(function() {

                                                text:
        $(this).qtip({
            content:{
                text: '<img class="throbber"
src="/projects/qtip/images/throbber.gif" alt="Loading..."
/>',
                                                ajax:
                ajax: {
                                                        url: $(this).attr('rel')
//
                    // Use the rel attribute of each element for the url
to load
                                                },
                                                title:
                    url: $(this).attr('rel')
                },
                title: {
                                                        text: 'Ticket - ' +
$(this).text(), //
                    // Give the tooltip a title using each elements
text
                                                        button:
                    text: 'Ticket - ' + $(this).text(), 
                    button: true
                                                }
                                        },
                                        position:
                }
            },
            position: {
                                                at:
                at: 'bottom center', 
                                                my:
                my: 'top center',
                                                viewport:
                viewport: $(window), 
                                                effect:
                effect: false 
                                        },
                                        show:
            },
            show: {
                                                event:
                event: 'click',
                                                solo:
                solo: true 
                                        },
                                        hide:
            },
            hide: 'unfocus',
                                        style:
            style: {
                                                classes:
                classes: 'qtip-wiki qtip-light qtip-shadow'
                                        }
                                        
                                })
                        })
                        .click(function(event)
            }
        })
    })
    .click(function(event) { event.preventDefault(); });
}
</script>
~~~



Hope it will be helpful...