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...