Print Page - tooltip on button within toolbar

Title: tooltip on button within toolbar
Post by: jaimi on January 07, 2015, 04:00:10 AM

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

Title: Re: tooltip on button within toolbar
Post by: jarry on January 07, 2015, 07:04:17 AM

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

Title: Re: tooltip on button within toolbar
Post by: jaimi on January 20, 2015, 05:25:03 AM

thanks, works great. :)

Title: Re: tooltip on button within toolbar
Post by: Pierre on March 31, 2017, 04:37:04 AM

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.

Title: Re: tooltip on button within toolbar
Post by: Pierre on April 02, 2017, 11:47:29 PM

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.

Title: Re: tooltip on button within toolbar
Post by: Pierre on April 12, 2017, 11:38:57 PM

Anybody, please?

Title: Re: tooltip on button within toolbar
Post by: jarry on April 12, 2017, 11:56:57 PM

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>

Title: Re: tooltip on button within toolbar
Post by: Pierre on April 14, 2017, 12:06:45 AM

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.

Title: Re: tooltip on button within toolbar
Post by: jarry on April 14, 2017, 06:27:06 PM

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

Title: Re: tooltip on button within toolbar
Post by: Pierre on April 14, 2017, 11:41:30 PM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jaimi on January 07, 2015, 04:00:10 AM