EasyUI Forum
December 05, 2025, 02:02:07 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: tooltip problem in panel  (Read 12234 times)
crosemffet
Jr. Member
**
Posts: 68



View Profile WWW Email
« on: April 03, 2016, 04:28:48 AM »

hello everybody and thanks for your support,
I'm trying to add programatically tooltip text to a icon on panel, but is not working
my code is:
$('#read_window_text').panel({
      tools:[{
         iconCls:'icon-add easyui-tooltip',title:'my tooltip title', handler:function(){alert('add')}
      },{
also try replacing title attribute with content (content:'my tooltip title')
but the tooltip doesn't show.
any suggestions..?
thanks in advance,
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: April 03, 2016, 08:17:32 AM »

Please refer to the code below:
Code:
<div id="pp" class="easyui-panel" title="Custom Panel Tools" style="width:700px;height:200px;" data-options="closable:true,tools:'#tt'">
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add easyui-tooltip" title="my tooltip title" onclick="javascript:alert('add')"></a>
</div>
Logged
crosemffet
Jr. Member
**
Posts: 68



View Profile WWW Email
« Reply #2 on: April 03, 2016, 11:54:10 AM »

stworthy, thanks for your reply.
i know your solution works, the problem is I'm creating the Panel programatically,
so, in the general panel example, how can I add tooltip to the tools?
$('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
        iconCls:'icon-add',
        handler:function(){alert('new')}
    },{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
any idea...? thanks in advance,
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: April 04, 2016, 07:59:28 AM »

The 'tools' property value can be an array or a jQuery object. You can create this 'tools' object programatically.
Code:
$('#pp').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools: function(){
    var t = $('<div></div>');
    $.map([{
        iconCls:'icon-add',
        text: 'add tooltip',
        handler:function(){alert('new')}
    },{
        iconCls:'icon-save',
        text: 'save tooltip',
        handler:function(){alert('save')}
    }], function(tool){
    var a = $('<a href="javascript:;"></a>').appendTo(t);
    a.addClass(tool.iconCls).tooltip({
    content:tool.text
    }).bind('click', tool.handler);
    });
    return t;
    }()
});
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!