Yii , show tooltip in cgridview( table ) value

Hi,

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,


array(

                        'name'=>'Comment',

                        'header'=>'Comment',

                        '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:

:





Yii::import('zii.widgets.grid.CDataColumn');


  class MyDataColumn extends CDataColumn {


 public function renderDataCell($row)

        {

             $data=$this->grid->dataProvider->data[$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;

              parent::renderDataCell($row);}


}






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,


array(

					    'name'=>'Comment',

					    'header'=>'Comment',

					    'type'=>'raw',

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

[left][/left]

Hi

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

thank you

@deepu

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

http://www.yiiframework.com/forum/index.php/topic/36757-gridview-mouseover-event/

Hi,

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


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

			

			), 

3) create the viewallticket on your controller file.


public function actionviewalltickert(){

   //code here

}

3)then put a jquery in admin grid view


<script>

$(document).ready(function()

{

	toolt_tip()

});


</script>




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: {

							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();}',

Thanks…

This is what i use:


array(

	'name'=>'client_nume',

	//start from here 

	'type'=> 'raw',

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

	//stop here

),



Output:


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

[color="#FF0000"]UPDATE[/color]

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


'afterAjaxUpdate'=>'function(id,options){$(".tooltipster").tooltipster({"position":"right","trigger":"click"});}',

So it will look like this:


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

	'afterAjaxUpdate'=>'function(id,options){$(".tooltipster").tooltipster({"position":"right","trigger":"click"});}',

...