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

                        '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="" />
<script type="text/javascript" src=""></script>

function [b]toolt_tip[/b](){

                                        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(); });

Hope it will be helpful...