SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: tooltip in IE

Hybrid View

  1. #1
    SitePoint Zealot santanu's Avatar
    Join Date
    Oct 2003
    Location
    india
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question tooltip in IE

    I have form combination of text boxes and selectboxes. My requirement is when mouse pointer comes over the text boxes and select boxes one tool tip will come over.

    For reference please check this url :
    http://www.pedsters-planet.co.uk/dir...nk_cur_cat=198


    I write one script for tooltip with help of javascript and css. It is working perfectly at mozila. But I face problem in IE. In IE tooltip doesnot visible over select box. Tooltip goes back of select box instead of coming over select box.

    How it can be solved?

    my javascript is :

    function showtip(current,e,text){

    if (document.getElementById)
    {
    tt_n = navigator.userAgent.toLowerCase();

    // this is the way the standards work
    var style2 = document.getElementById('tooltip').style;
    style2.display = 'block';

    if(tt_n.indexOf("msie") != -1) // if browser is IE
    {
    style2.left=e.x+8;
    style2.top=e.y+10;
    }
    else
    {
    style2.left=e.pageX+8;
    style2.top=e.pageY+10;
    }

    document.getElementById('tooltip').innerHTML='<div style="z-index: 150;width:250px;padding:2px;filter:shadow(color:gray,strength:10, direction:135);">'+text+'</div>';

    }
    else if (document.all)
    {

    // this is the way old msie versions work
    var style2 = document.all['tooltip'].style;
    style2.display = 'block';
    style2.left=e.x+8;
    style2.top=e.y+10;

    eval("document.all.tooltip").innerHTML=text;
    }
    else if (document.layers)
    {
    // this is the way nn4 works
    var style2 = document.layers['tooltip'].style;
    style2.display = 'block';
    style2.left=e.pageX+8;
    style2.top=e.pageY+10;

    document.layers['tooltip'].innerHTML=text;
    }

    }

    function hidetip(){

    if (document.getElementById)
    {
    // this is the way the standards work
    var style2 = document.getElementById('tooltip').style;
    style2.display = 'none';
    }
    else if (document.all)
    {
    // this is the way old msie versions work
    var style2 = document.all['tooltip'].style;
    style2.display = 'none';
    }
    else if (document.layers)
    {
    // this is the way nn4 works
    var style2 = document.layers['tooltip'].style;
    style2.display = 'none';
    }

    }

    - - - - -- - - - - - -- - - - - - - - - - - -- - - -- - - - -- - - - - - -- - - - - - - - - - - -- - - --- - - - -- - - - - - -- -

    style sheet is :

    #tooltip{
    z-index: 200;
    display: none;
    width:250px;text-align:left;padding:5px;background-color:#FFDAB9; border:1px solid orange;font-size:12px;
    position: absolute;
    }

    - - - - -- - - - - - -- - - - - - - - - - - -- - - -- - - - -- - - - - - -- - - - - - - - - - - -- - - --- - - - -- - - - - - -- -

    HTML is :

    <div id="tooltip">
    </div>


    <select name="qus" onMouseover="showtip(this,event,'select question" onMouseout="hidetip()">

    <option value="0">Select a question</option>
    </select>

  2. #2
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same problem!

    I have the same problem, does anyone have a fix for this?

    My example is here: http://hwdfurniture.com/quote2.php

    It works in Firefox, etc, but not IE

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The script posted above is quite ancient. And also quite bad, using unnecessary evals. I would recommend you to re-write it or find a better one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •