Member Avatar for Vemari

Hello,

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">
<head>
    <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 = '';
        }
    </script>

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

        </select>
    </form>
    </body>
</head>
</html>
  • 2 Contributors
  • 2 Replies
  • 152 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Vemari
Member Avatar for pritaeas

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

Member Avatar for Vemari

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'.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.