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.
this would probably be better suited in the javascript topic area.
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/
https://www.experts-exchange.com/Community_Support/
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
Tell me a liltte more, are you saying that you want a different tool tip for each optoin in the select list?
FtB
ASKER
yes, ftb
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.
ASKER
I have dropdownbox generated from DB:
event1 - long description1
event2 - long description2
etc..
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
<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.
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.
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.
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.
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
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
FtB
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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...
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...
ASKER
Got it, Thank to you all.