tooltip on button within toolbar

[jaimi]

Hi, I created the following pagination:

KundePager.pagination({
  showPageList: true,
  displayMsg  : '{from} bis {to} von {total} Kunden',
  buttons     :[
   {iconCls:'icon-add'   ,tooltip: 'tooltip', handler:function(){addKunde();}},
   {iconCls:'icon-edit'  ,text: 'text', handler:function(){editKunde();}},
   {iconCls:'icon-remove',handler:function(){removeKunde();}},
   {iconCls:'icon-save'  ,handler:function(){saveKunde();}},
   {iconCls:'icon-undo'  ,handler:function(){undoKunde();}}
  ]
 });//KundePager

I don't want to add the text but a tooltip. How to?
Thx, Jaimi

[jarry]

Please try the code below to create the tooltip for the buttons.

Code:

KundePager.pagination({
  //...
}).find('.l-btn').each(function(){
	var opts = $(this).linkbutton('options');
	if (opts.tooltip){
		$(this).tooltip({
			content: opts.tooltip
		})
	}
})

[jaimi]

thanks, works great.

[Pierre]

Hello
could someone help regarding adding tooltip to pagination button?
I try to implement Jarry's example but hot sure how.
Here is what I try but it does not show tooltip:

Code:

    var mypager = $('#dg').datagrid('getPager');
    mypager.pagination({
    	  showPageList:false,
        buttons:[{
            iconCls:'left',
            tooltip: 'tooltip1',
            handler:function(){
                alert('search');
            }
        },{
            iconCls:'right',
            tooltip: 'tooltip2',
            handler:function(){
                alert('edit');
            }
        }]
    }).find('.l-btn').each(function(){
			var opts = $(this).linkbutton('options');
			if (opts.tooltip){
				$(this).tooltip({
					content: opts.tooltip
				})
			}
	});		

Thank you.

[Pierre]

Hello,
does somebody use tooltip on datagrid pager?
I'm using code from this example:
http://jeasyui.com/easyui/demo/datagrid/custompager.html
how to add tooltip on "Edit" button, please?
Thank you.

[Pierre]

Anybody, please?

[jarry]

Please assign the 'easyui-linkbutton' and 'easyui-tooltip' classes to an existing element. This element will be convert to a linkbutton with tooltip.

Code:

<div id="buttons">
	<a href="javascript:;" class="easyui-linkbutton easyui-tooltip" iconCls="icon-search" plain="true" title="search"></a>
	<a href="javascript:;" class="easyui-linkbutton easyui-tooltip" iconCls="icon-add" plain="true" title="add"></a>
	<a href="javascript:;" class="easyui-linkbutton easyui-tooltip" iconCls="icon-edit" plain="true" title="edit"></a>
</div>
<script type="text/javascript">
	$(function(){
		var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
		pager.pagination({
			buttons:'#buttons'
		});			
	})
</script>

[Pierre]

Thank you Jarry, it works but only one time.
I created example here:

http://code.reloado.com/ecituq3/2/edit#preview

when you click on button "Click to test" - toolbar buttons are hidden.
I try to call this code again (after reload) - but it does not worked:

Code:

      var pager = $('#dg').datagrid('getPager');	// get the pager of datagrid
      pager.pagination({
        buttons:'#buttons'
      });		

Thank you for your help.

[jarry]

Please download the newest 'datagrid-scrollview.js' file from https://www.jeasyui.com/extension/datagridview.php

[Pierre]

Awesome, thank you so much, it works perfect.
Thank you.

P.S. Can not edit header as SOLVED because I did not started this topic.