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

Discussion in 'Javascript' started by hiroshi ochi, May 12, 2004.

  1. hiroshi ochi

    hiroshi ochi Guest

    Hello,

    Using MSIE 6.0 and above, with javascript is it possible to display an
    individual tooltip for each item in a listbox?

    I need this functionality to show the listitems that are longer than the
    listbox size.

    Please refer to this link to get the idea of what I would like to do.
    Unfortunately this one is for VB.

    http://www.codeguru.com/vb/controls/vb_listbox/article.php/c2767/

    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?

    Thanks in advanced.

    rgs,
    hiroshi
     
    hiroshi ochi, May 12, 2004
    #1
    1. Advertisements

  2. hiroshi ochi

    pcx99 Guest

    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="javascript:parent.boxClick(1)">A really, really, really long
    list item 1</A>
    <A HREF="javascript:parent.boxClick(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.
     
    pcx99, May 12, 2004
    #2
    1. Advertisements

  3. hiroshi ochi

    Randy Webb Guest

    pcx99 wrote:

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

    Better would be:

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

    And simply pass the href property, and have boxClick navigate accordingly.
     
    Randy Webb, May 12, 2004
    #3
  4. hiroshi ochi

    Hiroshi Ochi Guest

    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):
    <!-- start sample code -->
    <html>
    <script>
    function setLabelSpan(element){
    var label = document.getElementById('labelSpan');
    label.innerHTML=element.options[element.selectedIndex].text;
    }
    function setLabelNoSpan(element){
    var label = document.getElementById('labelNoSpan');
    label.innerHTML=element.options[element.selectedIndex].text;
    }
    </script>
    <body>
    <form >
    <table border="1" bordercolor="#000000">
    <tr>
    <td nowrap>Using Span </td>
    <td><span style="overflow:hidden;width:150px">
    <select name="select" border=0 onchange="setLabelSpan(this)">
    <option value="">Select Product Code</option>
    <option value="100">AE000 : Johnson's Baby Lotion (A/V)(G) -
    100mlx24 </option>
    <option value="101">AE001 : Johnson's Baby Lotion (A/V)(G) -
    200mlx24 </option>
    <option value="102">AE002 : Johnson's Baby Lotion (A/V)(G) -
    400mlx24 </option>
    <option value="103">AE003 : Johnson's Baby Lotion (A/V)(G) -
    800mlx24 </option>
    <option value="104">AE004 : Johnson's Baby Lotion (A/V)(G) -
    100mlx72 </option>
    <option value="105">AE005 : Johnson's Baby Lotion (A/V)(G) -
    200mlx72 </option>
    <option value="106">AE006 : Johnson's Baby Lotion (A/V)(G) -
    400mlx72 </option>
    <option value="107">AE007 : Johnson's Baby Lotion (A/V)(G) -
    800mlx72 </option>
    <option value="108">AE008 : Johnson's Baby Lotion (A/V)(N) -
    100mlx24 </option>
    <option value="109">AE009 : Johnson's Baby Lotion (A/V)(N) -
    200mlx24 </option>
    <option value="110">AE010 : Johnson's Baby Lotion (A/V)(N) -
    400mlx24 </option>
    <option value="111">AE011 : Johnson's Baby Lotion (A/V)(N) -
    800mlx24 </option>
    <option value="112">AE012 : Johnson's Baby Lotion (A/V)(N) -
    100mlx72 </option>
    <option value="113">AE013 : Johnson's Baby Lotion (A/V)(N) -
    200mlx72 </option>
    <option value="114">AE014 : Johnson's Baby Lotion (A/V)(N) -
    400mlx72 </option>
    <option value="115">AE015 : 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:150px" border=0
    onchange="setLabelNoSpan(this)">
    <option value="">Select Product Code</option>
    <option value="100">AE000 : Johnson's Baby Lotion (A/V)(G) -
    100mlx24 </option>
    <option value="101">AE001 : Johnson's Baby Lotion (A/V)(G) -
    200mlx24 </option>
    <option value="102">AE002 : Johnson's Baby Lotion (A/V)(G) -
    400mlx24 </option>
    <option value="103">AE003 : Johnson's Baby Lotion (A/V)(G) -
    800mlx24 </option>
    <option value="104">AE004 : Johnson's Baby Lotion (A/V)(G) -
    100mlx72 </option>
    <option value="105">AE005 : Johnson's Baby Lotion (A/V)(G) -
    200mlx72 </option>
    <option value="106">AE006 : Johnson's Baby Lotion (A/V)(G) -
    400mlx72 </option>
    <option value="107">AE007 : Johnson's Baby Lotion (A/V)(G) -
    800mlx72 </option>
    <option value="108">AE008 : Johnson's Baby Lotion (A/V)(N) -
    100mlx24 </option>
    <option value="109">AE009 : Johnson's Baby Lotion (A/V)(N) -
    200mlx24 </option>
    <option value="110">AE010 : Johnson's Baby Lotion (A/V)(N) -
    400mlx24 </option>
    <option value="111">AE011 : Johnson's Baby Lotion (A/V)(N) -
    800mlx24 </option>
    <option value="112">AE012 : Johnson's Baby Lotion (A/V)(N) -
    100mlx72 </option>
    <option value="113">AE013 : Johnson's Baby Lotion (A/V)(N) -
    200mlx72 </option>
    <option value="114">AE014 : Johnson's Baby Lotion (A/V)(N) -
    400mlx72 </option>
    <option value="115">AE015 : 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>

    <!-- end sample code -->


    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
     
    Hiroshi Ochi, May 13, 2004
    #4
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.