Yii , show tooltip in cgridview( table ) value


I want to show tooltip in cgridview value as on hover on column it should show whole contant stored in variable. I want to show contant in variable $data["comment"] as a tooltip ( title ), and currently it shows whole string as - $data["comment"].

Below is current code what I used,




                        'value'=>'(strlen($data["comment"])>35)?substr($data["comment"], 0, 35)."..":$data["comment"];',

                        'htmlOptions'=>array('title'=>'$data["comment"]'),  // this what i have do


i think you have to extend your own CDataColumn or complete it in js end (better way , after page loaded and use jquery to set the title attr then reregister the tooltip plugin ) . just my thought and for you to referring :lol:



  class MyDataColumn extends CDataColumn {

 public function renderDataCell($row)



              //here you should get the "value" , but it will be calculated inside the renderDataCell function see CDataColumn::renderDataCellContent 

              $value = <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' />   //  you may repeat the process that renderDataCellContent do

              $this->htmlOptions['title'] = $value;



don 't think this a good way , and recommend using the jquery

Got the answer in easy way,

I used code to show column in cgridview as,





					    'value'=>'( strlen($data->comment) > 35

					        ? CHtml::tag("span", array("title"=>$data->comment), CHtml::encode(substr($data->comment, 0, 35)) . "..")

					        : CHtml::encode($data->comment)



It shows tooltip on hover when comment is more than 35 character.



Was looking for a tooltip on mouseover on a cgridview cell which will display the detail related to that cell.

thank you


Haven’t you posted that question earlier and got two answers?



my tool tip is proper working on first page but when i click on pagination it’s not working.

my tooltip is qtip on jquery

How to solve this?

please help…

Best Regards,

Ankit Modi

Hi Frind,

After a long-time work i can create the tooltip on yii admin gridview using ajax and display the data dynamic

1) Add a js in your view 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>

1)apply the rel element on href admin grid view


			'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'),



3) create the viewallticket on your controller file.

public function actionviewalltickert(){

   //code here


3)then put a jquery in admin grid view







function toolt_tip(){





					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',// you can change the hover or so many more...

						solo: true 


					hide: 'unfocus',

					style: {

						classes: 'qtip-wiki qtip-light qtip-shadow'





			.click(function(event) { event.preventDefault(); });



It’s working for me.

Hi Ankit,

Try this…

Hope it will work…

'afterAjaxUpdate' => 'function(){ toolt_tip();}',


This is what i use:



	//start from here 

	'type'=> 'raw',

	'value'=> 'CHtml::tag("span",array("class"=>"tooltipster", "title" => sprintf($data->id)),$data->client_name)',

	//stop here



<td><span class="tooltipster" title="4312">Ionut Ionete</span></td>


If you use ajaxUpdate for your CGridView, you will need to add this in your CGridView Widged:


So it will look like this:

$this->widget('zii.widgets.grid.CGridView', array(