Title: [Solved] tooltip on hover in combogrid
Post by: argumentum on February 01, 2018, 09:35:04 PM
First post and I'm not sure of how to use the forum interface. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic ComboGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css"> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body> <h2>Basic ComboGrid as base for my example</h2> <p> Click the right arrow button to show the DataGrid.<br> On hovering the datagrid, a tooltip should show on the left hand side.<br> Is a bad example but is what I need help with. How to properly code it. </p> <div style="margin:20px 0"></div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 160px;"> <div style="margin-bottom:20px"> <select class="easyui-combogrid" style="width:100%" data-options=" panelWidth: 500, idField: 'itemid', editable: false, textField: 'productname', data:{'total':11,'rows':[ {'productid':'FI-SW-01','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'}, {'productid':'K9-DL-01','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'}, {'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'}, {'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':26.50,'attr1':'Rattleless','itemid':'EST-12'}, {'selected':true,'productid':'RP-LI-02','productname':'Iguana','unitcost':12.00,'status':'P','listprice':35.50,'attr1':'Green Adult','itemid':'EST-13'}, {'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':158.50,'attr1':'Tailless','itemid':'EST-14'}, {'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':83.50,'attr1':'With tail','itemid':'EST-15'}, {'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':23.50,'attr1':'Adult Female','itemid':'EST-16'}, {'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':89.50,'attr1':'Adult Male','itemid':'EST-17'}, {'productid':'AV-CB-01','productname':'Amazon Parrot','unitcost':92.00,'status':'P','listprice':63.50,'attr1':'Adult Male','itemid':'EST-18'} ]} , method: 'get', columns: [[ {field:'itemid',title:'Item ID',width:80}, {field:'productname',title:'Product',width:120}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'status',title:'Status',width:60,align:'center'} ]], fitColumns: true, label: 'Select Item:', onLoadSuccess:function(data){ $(this).datagrid('getPanel').find('tr.datagrid-row').bind('mouseover',function(e){ var index = parseInt($(this).attr('datagrid-row-index')); $(this).tooltip({trackMouse:false,showDelay:0,position:'left', content: data.rows[index]['attr1']}); }) }, labelPosition: 'top' "> </select> </div> </div> </body> </html> the preview is at http://code.reloado.com/ekubij3/9/edit#html,live There is a multitude of problems with my code. The mouse bind should no be used. What I need is the proper code for my desired view of mouse over on the row. Also fix the tooltip from falling under the datagrid. Changing the z order. Thanks.
Title: Re: tooltip on hover in combogrid
Post by: stworthy on February 01, 2018, 11:34:36 PM
The key code should be: onLoadSuccess:function(data){ $(this).datagrid('getPanel').find('tr.datagrid-row').each(function(){ var index = parseInt($(this).attr('datagrid-row-index')); $(this).tooltip({ trackMouse:false, position:'left', content:data.rows[index]['attr1'] }) }) },
Here is the updated example http://code.reloado.com/ekubij3/10/edit#preview
Title: Re: tooltip on hover in combogrid
Post by: argumentum on February 02, 2018, 08:34:27 AM
Thanks stworthy onLoadSuccess:function(data){ $(this).datagrid('getPanel').find('tr.datagrid-row').each(function(){ var index = parseInt($(this).attr('datagrid-row-index')); $(this).tooltip({ trackMouse:false, position:'top', // <-- the Z order. Can it be on top of the datagrid ? content:data.rows[index]['attr1'] }) }) } I've made the example to show on the left because I could not show it on top http://code.reloado.com/ekubij3/11/edit#preview can it be shown on top ?
Title: Re: tooltip on hover in combogrid
Post by: stworthy on February 02, 2018, 08:28:47 PM
Set the 'zIndex' property with a bigger value. $(this).tooltip({ zIndex:9999999, trackMouse:false, position:'top', content:data.rows[index]['attr1'] })
http://code.reloado.com/ekubij3/12/edit
|