[SOLVED] The title attribute for Combobox is not working

[hmdat]

I have one combobox with the label at the left side, but it's obscured a part.

And I want when the mouse is on the label, it show full text. So, I tried set the 'title' attribute, but it's not working.

Code:

Code:

<select class ="easyui-combobox" type="text" id="conditionForm_orgName" name="conditionForm_orgName" title="Organizaiton Name" style="width: 90%;height: 22px" data-options="label:' Organizaiton Name ',panelHeight:'auto',panelMaxHeight:'200',required:false,editable: false"/>

How can I fix this ?

Thanks.

[jarry]

You can set the 'labelWidth' property to a bigger value.

Code:

label: 'Organizaiton Name:',
labelWidth: 150

[hmdat]

Dear Jarry,
Many thanks for your reply, but beside this solution, if it is possible to make the title attribute work, or the combobox plugin didn't support this ?

[jarry]

You can also call 'label' method to get the label object and then set the 'title' attribute for it.

Code:

var label = $('#conditionForm_orgName').combobox('label');
label.attr('title', 'Organizaiton Name');

[hmdat]

Dear Jarry,
Actually before ask this question, I have tried search, and also found an your answer for change label for textbox follow link:
https://www.jeasyui.com/forum/index.php?topic=6843.0

Your code works for textbox, but for combobox:
If I tried put this javascript segment in

Code:

$(document).ready(function(){ .......});

, it doesn't work.

If I put code in onBeforeLoad event of combobox, it works:

Code:

<select class ="easyui-combobox" type="text" id="conditionForm_orgName" name="conditionForm_orgName" style="width: 90%;height: 22px" data-options="label:' Organizaiton Name ', panelHeight:'auto', panelMaxHeight:'200', required:false, editable: false, onBeforeLoad:function(){.....<java script code to change label>......}"/>

Generally, this solution also good, but I wonder if any better solution, like we can extend the 'title' attribute for combobox and re-write for it, but I'm not sure how to do ?

[jarry]

The example works fine on combobox components.  

http://code.reloado.com/ukiwoj4/edit#html,live

Another way to attach the 'title' attribute is to wrap the 'label' with a '<span>' element.

Code:

    <select class ="easyui-combobox" type="text" id="conditionForm_orgName" name="conditionForm_orgName" style="width: 200px;height: 22px" data-options="label:'<span title=\'Organizaiton Name\'>Organizaiton Name</span> ',panelHeight:'auto',panelMaxHeight:'200',required:false,editable: false"/>

[hmdat]

Hi Jarry,
I have known the reason why it didn't work.
My combox was in one iframe, I tried changed put

Code:

var label = $('#conditionForm_orgName').combobox('label');
label.attr('title', 'Organizaiton Name');

in

Code:

$(window).load(function(e) {....} 

and it works.

Also your solution with using the <span> is very DELICATE and PERFECT, that is what I need.

Thank you billion times, Jarry!