option tag title should be always display

Question

Hi,

is there anyway for the title in option tag to be displayed always?

<select>
<option title="sometitle" value="">1</option>
</select>

any ideas please?

Thanks

Answer 1

Should be:

<select title="sometitle">
    <option value="">1</option>
</select>

I you want tool-tips on every option, you should consider developing a custom combo box that will implement that behavior (Using JQuery,HTML, CSS).

Answer 2

I worked using the title tag, but I was using this previously and this does not answer my question.

Answer 3

I am restricting the size of select, so I want the user be able to see long text that has been truncated in the title tag, as it gets disoplayed when the user hovers the mouse on the option

Just give it a width with help of a little CSS. In real webbrowsers the dropdown list width will automatically expand to the largest option when you open it. Only in a certain webbrowser developed by a team in Redmond the dropdown list width won't expand like that. It will hide large options which is indeed very hairpulling.

You can use Javascript to control the width during the desired events. Here's an jQuery based example:

if ($.browser.msie) $('select.wide')
    .bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
    .bind('click', function() { $(this).toggleClass('clicked'); })
    .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
    .bind('change blur', function() { $(this).removeClass('expand clicked'); });

..in combination with this piece of CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

All you need to do is to add the wide class to the dropdown element(s) in question (do not apply it on dropdowns with options whose most wide option is still smaller than the dropdown width!):

<select class="wide">
    ...
</select>

Hope this helps.