Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

how to create tooltip like feautre in <select><option> feild

Posted on 2009-04-29
6
Medium Priority
?
496 Views
Last Modified: 2012-05-06
Hi,

I was trying to get a simple javascript tooltip (text on mouser over displays a image next to it) to work in a form in the select and options field. An image was suppose to appear next to each option in the select. (It works fine in any part of the form expect the select/options field.)

So I instead is there a way I can have one div which will display the image and on each mouseover in the select options the image will change/ swap. So for example:

<div>swap image goes here (show image 1, show image 2, show image 3)</div>

<select>
<option onmouseover='show image1'>View image 1</option>    
<option onmouseover='show image2'>View image 2</option>
<option onmouseover='show image 3'>View image 3</option>
</select>

Is this possible do to in javascript or php and how? (Please let me know if I need to clarify)
0
Comment
Question by:ultramoo
  • 3
  • 3
6 Comments
 
LVL 51

Accepted Solution

by:
Steve Bink earned 1500 total points
ID: 24266697
This demo should point the way.  You can replace the innerHTML property with an <img> element, or maybe you have an <img> element there instead and just change the src attribute.  If you want to use images, create an array of src images in javascript, and use the index of the hovered option to get the appropriate array element.
<html>
  <head>
    <title>Option MouseOver Demo</title>
    <script type="text/javascript">
      function showoption(i) {
        t = document.getElementById('divmouseover');
        t.innerHTML='You are hovering option ' + i.value;
      }
    </script>
  </head>
  <body>
    <div id="divmouseover">&nbsp;</div>
    <select>
      <option value="1" onmouseover="showoption(this);">Option 1</option>
      <option value="2" onmouseover="showoption(this);">Option 2</option>
      <option value="3" onmouseover="showoption(this);">Option 3</option>
    </select>
  </body>
</html>

Open in new window

0
 

Author Comment

by:ultramoo
ID: 24267152
Thanks thats exactly what I was after! I realize though its not working in internet explorer, can this be fixed?
0
 
LVL 51

Expert Comment

by:Steve Bink
ID: 24267218
With my IE7 installation, it appears as though IE is not recognizing the mouseover event for the option elements.  While that event *is* part of the standard, IE has not shown a great history of caring about little things like interoperability.  A quick google for "IE option mouseover" shows this is a known issue.

I found one possible workaround, but have not played with it myself:

http://www.dougdossett.com/Details.aspx?Detail=11
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:ultramoo
ID: 24267472
Thanks again for the help. This was the same problem I faced in the start with using tooltip (working in some browsers only for the select/option field). What if there was a way to change the mouseover event to a css class and intergrate it into the javascript? (Not sure if its even possible) Somthing like this:

<html>
  <head>
    <title>Option MouseOver Demo</title>
    <style type="text/css">
     .change{
     ....
    }
   </style>
    <script type="text/javascript">
      function showoption(i) {
        t = document.getElementById('divmouseover');
        t.innerHTML='You are hovering option ' + i.value;
        var change = ...
      }
    </script>
  </head>
  <body>
    <div id="divmouseover"> </div>
    <select>
      <option value="1" class="change">Option 1</option>
      <option value="2" class="change">Option 2</option>
      <option value="3" class="change">Option 3</option>
    </select>
  </body>
</html>

Or is there no hope? lol
 
0
 
LVL 51

Expert Comment

by:Steve Bink
ID: 24267661
You are certainly free to experiment with it, but I'm guessing it is not going to go much further than it is.  If IE doesn't respond to the mouseover event, there's just nothing to hook into, CSS or not.  You could always create your own pseudo-dropdown box to mimic the behavior...a lot of work just to overcome Microsoft's issue.
0
 

Author Comment

by:ultramoo
ID: 24276693
I think i'll stick to the first code you sent me. Thanks anyways!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month20 days, 21 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question