Yii Framework Forum: Yii , show tooltip in cgridview( table ) value - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Yii , show tooltip in cgridview( table ) value Yii , show tooltip in cgridview( table ) value Rate Topic: ***** 2 Votes

#1 User is offline   kiran sharma 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 21-May 11
  • Location:India

Posted 16 June 2012 - 06:32 AM

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

Thanks,
Kiran Sharma.
0

#2 User is offline   yiqing95 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 598
  • Joined: 27-December 10
  • Location:china

Posted 16 June 2012 - 10:10 AM

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 = ???   //  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
0

#3 User is offline   kiran sharma 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 21-May 11
  • Location:India

Posted 19 June 2012 - 03:41 AM

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.
Thanks,
Kiran Sharma.
2

#4 User is offline   deepu 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 24-October 11
  • Location:delhi india

Posted 21 October 2012 - 12:46 PM


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

#5 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,166
  • Joined: 05-January 12
  • Location:Morocco

Posted 21 October 2012 - 01:11 PM

@deepu
Haven't you posted that question earlier and got two answers?
http://www.yiiframew...ouseover-event/
0

#6 User is offline   Ankit Modi 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 891
  • Joined: 19-February 13
  • Location:India

Posted 10 April 2013 - 12:18 AM

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
Thanks,
Ankit Modi
Skype : amodi06
0

#7 User is offline   Ankit Modi 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 891
  • Joined: 19-February 13
  • Location:India

Posted 10 April 2013 - 10:54 PM

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.
Thanks,
Ankit Modi
Skype : amodi06
0

#8 User is offline   Ravi Bhalodiya 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 64
  • Joined: 27-August 12
  • Location:Gujarat India

Posted 14 May 2014 - 01:58 AM

Hi Ankit,


Try this...

Hope it will work...

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





Thanks...
Regards
Ravi Bhalodiya.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users