Link to home
Start Free TrialLog in
Avatar of Vlad1k
Vlad1k

asked on

Tooltip on mouse over inside dynamic dropdown box

I have a dropdown box generated dynamicly from database. I have to display more information on mouse over about product - like tooltip, or new layer with extra info.
Avatar of WMIF
WMIF

this would probably be better suited in the javascript topic area.
Avatar of Vlad1k

ASKER

how do I change topic?
you would need to post in the community support to have a moderator move the topic for you.
https://www.experts-exchange.com/Community_Support/
Avatar of fritz_the_blank
Actually, if it comes from the database, then perhaps ASP is the better place.

Tell me a liltte more, are you saying that you want a different tool tip for each optoin in the select list?

FtB
Avatar of Vlad1k

ASKER

yes, ftb
Avatar of Vlad1k

ASKER

Thing is that description is too long and it's not fits all in my dynamic textbox. So I guess tooltip is the best solution unles you know other.
Avatar of Vlad1k

ASKER

I have dropdownbox generated from  DB:
event1 - long description1
event2 - long description2

etc..
So, let's say that your dynamic output looks like this:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

If the user mouses over option B, it should show a different optoin over C?

FtB
>Actually, if it comes from the database, then perhaps ASP is the better place.

i figured that since hes got the db polling working and this being a question more about dynamic html it would be better suited for javascript or maybe dynamic html if there is one.
the options of the drop down have the "title" property but i just tested it and it doesnt even show the tooltip when the thing is compressed.
Avatar of Vlad1k

ASKER

FTB, hm... I don't think this is a good idea. Then user will not be able to select C oprion.
I think to the right side is better.

Like here:
https://www.experts-exchange.com/questions/20305298/tooltips-in-listboxes.html?query=dropdown+box+tooltip&topics=101#7148654
but code is static and too complecated.
Avatar of Vlad1k

ASKER

and style of dropbox in the above example is not suitable
>>FTB, hm... I don't think this is a good idea. Then user will not be able to select C oprion.<<

Sorry, I don't mean this as a solution, I am just trying to understand the problem.

Now, as far as I know, you can only use the onMouseOver event for the option with NS 6+. If on the other hand, you want to do this when an item is selected, that is much easier.

FtB
I have to head off for the night, but I'll check in tomorrow.

FtB
Avatar of Vlad1k

ASKER

need onmouse over that will work with IE , don't care much about other browsers. Mouse over is the best solution I think, because I have more then 20 events and client will not see all description. Make Selection of each event to see description is no good.
ive always used a new window for lists like that.  put a text box on the main page and have a window popup that lists the details.  then the user clicks the link they want and a javascript function updates the parent page.  you can even allow for different sorting options then too.
I think I see your problem but as you've probably already found out, there is no 'onMouseOver' event for the <OPTION> tag, only for the parent <SELECT> tag...

I once developed something similar for a different reason and had to literally re-invent the drop-down combo as an Input box using an image for the down arrow and a series of <DIV> elements beneath the input when the image was clicked. This allowed full control over each element (even TITLE property for each item) in the drop-down and to the end user looked just like a normal combo.

If it is critical that you have this feature, I'll try digging through my backup archives from years ago to find the code I wrote but you may decide the alternate solution offered above is a quicker fix.

As WMIF mentioned above, the solution I wrote is really a Javascript fix but I rarely look in that section as I tend to stick to ASP problems.
SOLUTION
Avatar of Dragonlaird
Dragonlaird

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This could be done in a dhtml layer menu. It look exactly like a select menu, only its actually layers emulating what a select does. A select as a form object has many restrictions which do not apply to layers.

example here, hover over the products, and a tool tip apears. Strictly, this is not a drop down, but the priciple is the same.

http://dhtml-menu.com/examples/dhtml-menu-ex2.html
Incidently, I remembered why I had to create that combo, IE has a bug when displaying DIV or SPAN elements over the top of a form (such as a flaoting window) in that SELECT combo's always have the highest zIndex value, regardless of what you set it to in the style property, hence SELECT combo's would always appear through any opaque box palced over the form - looked ugly and unprofessional, so I wrote my own hehe
Great minds aplimedia - same principle and end result - I used the Title property of the 'Option' div's to save having to re-write the code to display the full content cos I'm lazy like that lol
Avatar of Vlad1k

ASKER

project that I'm working on is not new, and it's already a live website with a design. So I can Use only a dropdown box, otherwise it will brake design of the website.

Here is screenshots how that part is looks like:

http://www.4freeimagehost.com/uploads/704ed9c20f5d.gif
http://www.4freeimagehost.com/uploads/90bfeec6483b.gif

Maybe it'll help you guys a liitle for a better solution. Thank you
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Vlad1k

ASKER

You lost me, can you give me spesific example
Basically Vlad1k, what aplimedia is saying is, the solution suggested above (using a <INPUT><IMG> with drop-down <DIV>s) replaces the existing <SELECT> in your page HTML and the end-result looks and feels exactly the same to the end-user but gives you the ability to use the TITLE property of each element in the drop-down box.

Since other people have had to develop such a work-around in the past, it is indicative that there is no other quick-fix for your problem but the up-side is, since the home-made combo uses an <INPUT> box, the contents are submitted as part of the form.

If the VALUE property of your <OPTION> elements contains different values than that displayed in the drop-down list (e.g. an ID number instead of the text content that is visible) then, as FtB suggested, a hidden <INPUT> field could be modified when the drop-down is selected to hold this value and be submitted as part of the normal form post.

Hope this helps clarify for you...
Avatar of Vlad1k

ASKER

Got it, Thank to you all.