This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.
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...
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.