How to display an individual tooltip for each item in a listbox (select box)

**pcx99** · Jul 23 '05, 10:53 AM

Re: How to display an individual tooltip for each item in a listbox(select box)

hiroshi ochi wrote:[color=blue]
> Is there any event that I can catch when I am moving between the items
> in listbox selection? Is it possible to get the value of the item
> currently selected while expanding the listbox?[/color]

While onMouseOver works on the Select tag it doesn't work on the
individual items in the option tags (In IE anyway). This means you
can't really use a select box to do what you want to do. Fortunately
you can simulate this effect.

Create a new HTML page and have it be nothing but your select list
as
<A HREF="javascrip t:parent.boxCli ck(1)">A really, really, really long
list item 1</A>
<A HREF="javascrip t:parent.boxCli ck(2)">A really, really, really long
list item 2</A>
etc.

Now use an iframe on your main page to display your list (as narrow as
you want as large as you want). To prevent horizontal scrolling in your
iframe in your <BODY> in the list (not the main page) do this... <body
style="overflow-x:hidden; overflow-y: auto;">

On your main page create a function called boxClick(value) that sets the
value of a hidden field. When the user clicks in the iframe it will
call boxClick on your main page with the value the user clicked on.

Now as for the individual tooltips there's already a very powerful
pre-existing flyover tooltip maker at http://www.bosrup.com/web/overlib/
-- in your list html just include the overlib.js script, and set
onmouseover and onmouseout events for each link as described in the
documentation.

It's a lot of work to get around a failing in IE but it can be done and
in a way that will remain true to your vision.

Hope this helps you out a bit.

**Randy Webb** · Jul 23 '05, 10:54 AM

Re: How to display an individual tooltip for each item in a listbox

pcx99 wrote:

<--snip-->
[color=blue]
> Create a new HTML page and have it be nothing but your select list
> as
> <A HREF="javascrip t:parent.boxCli ck(1)">A really, really, really long
> list item 1</A>
> <A HREF="javascrip t:parent.boxCli ck(2)">A really, really, really long
> list item 2</A>
> etc.[/color]

http://www.jibbering.com/faq/#FAQ4_24

Better would be:

<a href="URLToGoTo WithJSDisabled. html"
onclick="parent .boxClick(this. href)">A really......... </a>

And simply pass the href property, and have boxClick navigate accordingly.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/

**Hiroshi Ochi** · Jul 23 '05, 10:55 AM

Re: How to display an individual tooltip for each item in a listbox

Thanks pcx99 and Randy for your reply and information.

If possible, I would like to avoid using iframe because there will be
too much amendment I have to do in my application.

The main problem I am facing right now is that the width I can assign
for each listbox is limited, but the text contents of each items in
listbox is pretty long. Thus, it will be hard for user to select items
that looks the similar.

First, I thought of using tooltip to assist user to select, but then I
got another simpler idea by using <span> to wrap the <select> tag. I
just set the <span> width to a certain value, and not restricting the
width in the <select> part.

Please take a look at the sample code below (tested in MSIE 6.0):

<html>
<script>
function setLabelSpan(el ement){
var label = document.getEle mentById('label Span');
label.innerHTML =element.option s[element.selecte dIndex].text;
}
function setLabelNoSpan( element){
var label = document.getEle mentById('label NoSpan');
label.innerHTML =element.option s[element.selecte dIndex].text;
}
</script>
<body>
<form >
<table border="1" bordercolor="#0 00000">
<tr>
<td nowrap>Using Span </td>
<td><span style="overflow :hidden;width:1 50px">
<select name="select" border=0 onchange="setLa belSpan(this)">
<option value="">Select Product Code</option>
<option value="100">AE0 00 : Johnson's Baby Lotion (A/V)(G) -
100mlx24 </option>
<option value="101">AE0 01 : Johnson's Baby Lotion (A/V)(G) -
200mlx24 </option>
<option value="102">AE0 02 : Johnson's Baby Lotion (A/V)(G) -
400mlx24 </option>
<option value="103">AE0 03 : Johnson's Baby Lotion (A/V)(G) -
800mlx24 </option>
<option value="104">AE0 04 : Johnson's Baby Lotion (A/V)(G) -
100mlx72 </option>
<option value="105">AE0 05 : Johnson's Baby Lotion (A/V)(G) -
200mlx72 </option>
<option value="106">AE0 06 : Johnson's Baby Lotion (A/V)(G) -
400mlx72 </option>
<option value="107">AE0 07 : Johnson's Baby Lotion (A/V)(G) -
800mlx72 </option>
<option value="108">AE0 08 : Johnson's Baby Lotion (A/V)(N) -
100mlx24 </option>
<option value="109">AE0 09 : Johnson's Baby Lotion (A/V)(N) -
200mlx24 </option>
<option value="110">AE0 10 : Johnson's Baby Lotion (A/V)(N) -
400mlx24 </option>
<option value="111">AE0 11 : Johnson's Baby Lotion (A/V)(N) -
800mlx24 </option>
<option value="112">AE0 12 : Johnson's Baby Lotion (A/V)(N) -
100mlx72 </option>
<option value="113">AE0 13 : Johnson's Baby Lotion (A/V)(N) -
200mlx72 </option>
<option value="114">AE0 14 : Johnson's Baby Lotion (A/V)(N) -
400mlx72 </option>
<option value="115">AE0 15 : Johnson's Baby Lotion (A/V)(N) -
800mlx72 </option>
</select>
</span> </td>
</tr>
<tr>
<td nowrap>Without Span </td>
<td>
<select name="select" style="overflow :hidden;width:1 50px" border=0
onchange="setLa belNoSpan(this) ">
<option value="">Select Product Code</option>
<option value="100">AE0 00 : Johnson's Baby Lotion (A/V)(G) -
100mlx24 </option>
<option value="101">AE0 01 : Johnson's Baby Lotion (A/V)(G) -
200mlx24 </option>
<option value="102">AE0 02 : Johnson's Baby Lotion (A/V)(G) -
400mlx24 </option>
<option value="103">AE0 03 : Johnson's Baby Lotion (A/V)(G) -
800mlx24 </option>
<option value="104">AE0 04 : Johnson's Baby Lotion (A/V)(G) -
100mlx72 </option>
<option value="105">AE0 05 : Johnson's Baby Lotion (A/V)(G) -
200mlx72 </option>
<option value="106">AE0 06 : Johnson's Baby Lotion (A/V)(G) -
400mlx72 </option>
<option value="107">AE0 07 : Johnson's Baby Lotion (A/V)(G) -
800mlx72 </option>
<option value="108">AE0 08 : Johnson's Baby Lotion (A/V)(N) -
100mlx24 </option>
<option value="109">AE0 09 : Johnson's Baby Lotion (A/V)(N) -
200mlx24 </option>
<option value="110">AE0 10 : Johnson's Baby Lotion (A/V)(N) -
400mlx24 </option>
<option value="111">AE0 11 : Johnson's Baby Lotion (A/V)(N) -
800mlx24 </option>
<option value="112">AE0 12 : Johnson's Baby Lotion (A/V)(N) -
100mlx72 </option>
<option value="113">AE0 13 : Johnson's Baby Lotion (A/V)(N) -
200mlx72 </option>
<option value="114">AE0 14 : Johnson's Baby Lotion (A/V)(N) -
400mlx72 </option>
<option value="115">AE0 15 : Johnson's Baby Lotion (A/V)(N) -
800mlx72 </option>
</select>
</td>
</tr>

</table>
<br> Selected Value using span = <span id="labelSpan"> </span>
<br> Selected Value without span = <span id="labelNoSpan "></span>
</form>
</body>
</html>



The row 'without span' in the table is what the original looks like, and
row 'using span' is after using the span.

I hope this one idea can help another people too.

thanks,
hiroshi

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

**mscir** · Jul 23 '05, 10:55 AM

Re: How to display an individual tooltip for each item in a listbox(select box)

hiroshi ochi wrote:[color=blue]
> Hello,
> Using MSIE 6.0 and above, with javascript is it possible to display an
> individual tooltip for each item in a listbox?[/color]
<snip>

If you don't mind using a div, and document.getEle mentById which has
limited browser support, take a look at this page (see last code
example). It updates the text in a div. If you want you can track the
mouse, move the div to the right of the mouse and make it visible when
it is over the select options, make bkg yellow to look like a VB tooltip
if you want.

Solved: SELECT Behaviour | Experts Exchange

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20942527.html

Find answers to SELECT Behaviour from the expert community at Experts Exchange

Mike

**Hiroshi Ochi** · Jul 23 '05, 10:55 AM

Re: How to display an individual tooltip for each item in a listbox (select box)

Hello Mike,

Thanks for the information.

I tried the code you mentioned. Yes this behaviour imitates the vb
example that I refered.

I think this one is very handy in a listbox with size more than 0.
Unfortunately, in this particular problem, I have to handle the listbox
with size 0. My apologies for not explaining this in advanced.

But I believe I still can utilize this in other part of my application.
Thanks very much!

rgs,
hiroshi

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

How to display an individual tooltip for each item in a listbox (select box)

How to display an individual tooltip for each item in a listbox (select box)

Comment

Comment

Comment

Comment

Comment