In HTML select tag I use onmouseover and onmouseout events to show the field value as a hint in case if the content doesn't fit in combo box.
The problem is when the combo box is expanded and I move the mouse through the content it shows the wrong hints. Everything is OK if the value is selected.
I checked this in Google Chrome and noticed that hints doesn't appear when the combo box is expanded. Seems it is a firefox problem.
Please advice.
Below is my code:

<html style="height: 100%; overflow: hidden;" xmlns="http://www.w3.org/1999/xhtml">
    <script type="text/javascript">
        function showTooltip(component, combo) {
            if (combo) {
                component.title = component.options[component.selectedIndex].text;
            } else {
                component.title = component.value;

        function hideTooltip(component) {
            component.title = '';

        <select onmouseover="showTooltip(this, true);"
            <option>California -- CA</option>
            <option>Colorado -- CO</option>
            <option>Connecticut -- CN</option>


If you provide a title attribute for your option tag, the standard browser tooltip should work just fine without JS.

I need to show always the current value as a hint, i.e. if the value of the combo was 'A' and 'B' is selected, the hint should be 'B'.