Hi Friends,
How to display the tooltip using ajax in admin gridview..
**1)**
First write a code on admin.php
```php
array(
'name' => 'Ticket Status',
'type' => 'raw',
'value' => 'CHtml::link($data["view"],
CHtml::normalizeUrl("javascript:void(0)"),
array(
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
```php
public function actionviewallticket(){
//
write a code here.....
}
```
**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" />[...]
```php
<script>
$(document).ready(function()
{
toolt_tip()
;
});
function
[b]toolt_tip
[/b](){
$('a[.tool_tip][rel]').each(function()
{
$(this).qtip(
{
$(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
url: $(this).attr('rel')
},
title: {
text: 'Ticket - ' + $(this).text(), // Give the tooltip a title using each elements text
button: true
}
},
position: {
at: 'bottom center',
my: 'top center',
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: {
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'qtip-wiki qtip-light qtip-shadow'
}
})
})
},
hide: 'unfocus',
style: {
classes: 'qtip-wiki qtip-light qtip-shadow'
}
})
})
.click(function(event) { event.preventDefault(); });
}
</script>
```
Hope it will be helpful...
34k+
