How to Display tooltp(qtip) on CGridview dynamic

You are viewing revision #7 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 or see the changes made in this revision.

« previous (#6)next (#8) »

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" => "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

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

0 0
4 followers
Viewed: 15 775 times
Version: Unknown (update)
Category: Tips
Written by: Ankit Modi
Last updated by: softark
Created on: Jul 22, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history

Related Articles