Show complete select box entry

[Jens Riedel]

Hi,

I use a select box with a fix width (via stylesheet).
So some of the entries are cut on the right side if they're too long.
Is there a way to display them complete like a tool tip on a mouseover?

Thanks,
Jens

 

[Grant Wagner]

Hi,

I use a select box with a fix width (via stylesheet).
So some of the entries are cut on the right side if they're too long.
Is there a way to display them complete like a tool tip on a mouseover?

Thanks,
Jens

<select ... onmouseover="this.title =
this.options[this.selectedIndex].text;">

Works in Netscape 7, Mozilla and other Gecko-based browsers and Opera 7.
It'd work in IE too if IE displayed the TITLE on <select> in a tooltip.

I even tried the following in IE:

<span id="testWrapper"><select ... onmouseover="this.parentNode.title =
this.options[this.selectedIndex].text;">
<!-- options -->
</select></span>

No joy. Probably caused by the fact that a <select> is a windows object
that doesn't play well with other HTML elements <url:
http://support.microsoft.com/default.aspx?scid=kb;en-us;177378 />

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Ivo]

<select ... onmouseover="this.title =

this.options[this.selectedIndex].text;">
I even tried the following in IE:
<span id="testWrapper"><select ... onmouseover="this.parentNode.title =
this.options[this.selectedIndex].text;">
<!-- options -->
</select></span>

A workaround that I appear to be progressing with although I can not
post example code atm, is to subtract the Yposition of the select list
from the mouse Yposition, compare that to the selectedIndex to find
which of the dropped down options is currently highlighted, then
display a absolutely floating div NEXT to the select. You need to know
the font height etc.etc.
HTH
Ivo

 

[Jens Riedel]

Hi Grant,

Grant Wagner wrote:

[..]

No joy. Probably caused by the fact that a <select> is a windows object
that doesn't play well with other HTML elements <url:
http://support.microsoft.com/default.aspx?scid=kb;en-us;177378 />

Thanks for your hints, it works fine with Mozilla.

Unfortunately IE is just the browser our customers use in 95% of all
cases, so perhaps I have to try the workaround Ivo describes.

Regards,
Jens

 

[Jens Riedel]

A workaround that I appear to be progressing with although I can not
post example code atm, is to subtract the Yposition of the select list
from the mouse Yposition, compare that to the selectedIndex to find
which of the dropped down options is currently highlighted, then
display a absolutely floating div NEXT to the select. You need to know
the font height etc.etc.
HTH
Ivo

Hi Ivo,

thanks for this hint. If our customers can't be made to abstain from the
tooltip, I'll try this...

Regards,
Jens