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.
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"=>"[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="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 [b]toolt_tip[/b](){
$('a[.tool_tip][rel]').each(function()
{
$(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
},
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(); });
}
</script>
Hope it will be helpful...
Demo link please
I had to do some Googling to find out what tooltp was all about. A demo link to demonstrate this would be nice.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.