140912 - Tooltips not being displayed

Status: RESOLVED FIXED

(Tech Evangelism Graveyard :: English US, defect)

Description

[George Metz]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0rc1)
Gecko/20020417
BuildID:    Release Canidate 1

On cusor over - the tooltip does not display.  This is critical within our
company as the browser will not be useable.

Reproducible: Always
Steps to Reproduce:
1.Move cusor over a tool tip which is on the page.   Unfortunately I have only
and internal site and can not allow you inside the firewall.
2.
3.

Actual Results:  Nothing

Expected Results:  Should show the information in the tooltip.

Theme is default thema

Comment 1

[R.K.Aa.]

What does the code for this tooltip look like?

Comment 2

[Boris Zbarsky [:bzbarsky]]

Could you save the page and attach it to this bug?  I suspect you're expecting
the "alt" attribute on images to create a tooltip...

Comment 3

[Rainer Bielefeld]

Reporter, do you talk abot a tooltip as following:
goto http://home.t-online.de/home/martina-buss/privat.htm
mouse to the mozilla-picture
You see tooltip "my new friend"

Most older Browsers and IE6 display the text of the ALT- tag as tooltip, but
actually most html- experts say (with good arguments), that the text of the
TITLE-tag should be shown, and mozilla shows the TITLE-tag-text.

This can cause problems with internet-pages, where pictures have only alt-text
for tooltip-usage.

Fine would be a preference for "ALT-text as tooltip ON/OFF"

Comment 4

[George Metz]

Attachment: Copy of the web page per your request

Hope this helps

Comment 5

[George Metz]

http://home.t-online.de/home/martina-buss/privat.htm - works the same way in IE 
6 as it does in Mozilla. Do not think this is the same problem.

Comment 6

[Christopher Hoess (gone)]

George: I think we may also need the Javascript at /support/img_pln/pln3.js
(relative URL from the attached page) to diagnose the problem.

Comment 7

[Boris Zbarsky [:bzbarsky]]

George, one more question.  Where on the page should I point the mouse to get
the tooltips?  What should they say?

Comment 8

[George Metz]

Putting your cursor on the Name will show a tool tip with phone number and 
mobile phone(if available) and the Time Zone in the scheduler placing over the 
calendar(small) will show the appoints for the person  Which will match what is 
displayed below each date.  when showing multipe people this becomes very 
useful. 

Comment 9

[Boris Zbarsky [:bzbarsky]]

Yeah.. those popups are created with js....  Could you save the page as "web
page, complete" and attach a zip of all the files involved?

Comment 10

[George Metz]

Here is the java script you requested.
*/========================================
var sd, ed, sa, ea,global_d,global_a;
var dom = (document.getElementById) ? true : false;
var ns5 =((navigator.userAgent.indexOf("Netscape")>-1) &&dom)? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
var periods = new Array('AM_1', 'AM_2', 'PM_1', 'PM_2');
var dates = new Array;
var an = new Array;
var tt = new Array;
var is = new Array;
var ic = new Array;
var ia = new Array;
var sh = new Array;
var aa = new Array;
var de = new Array;
sd = new String("");
sa = new String("");
stop = new String("start");

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

// tooltip content variable(s)
var tooltip;

function app(txt_index,begin_shift,end_shift,activity,status){
	var txt="";
	txt = txt + sh[begin_shift] 
	txt = txt + ' - ' + sh[end_shift];
	txt = txt + ' <B>' + aa[activity] + '</B> ';
	txt = txt + ' <SMALL><I>' + tt[status] + '</I></SMALL> ';
	if (txt_index != "-1") { txt = txt + tt[txt_index]; } 
	return txt;
}

function d(evt,txt_index,appointment) {
	var txt = "";
	if(appointment+"m" == "undefinedm"){
			txt=tt[txt_index];
	}else {
			txt=de[txt_index];
	}
        var tip;
        if (ns4) {
                tip = '<TABLE BGCOLOR="#000000" WIDTH=280 CELLSPACING=0 
CELLPADDING=1 BORDER=0><TR><TD><TABLE BGCOLOR="#DDECFF" WIDTH="100%" 
CELLSPACING=0 CELLPADDING=3 BORDER=0><TR><TD CLASS="tip">' + txt  
+ '</TD></TR></TABLE></TD></TR></TABLE>';
                tooltip = document.tipDiv;
                tooltip.document.write(tip);
                tooltip.document.close();
                if ((evt.pageX + 8 + tooltip.clip.width) > (window.innerWidth + 
window.pageXOffset)) {
                                tooltip.left = evt.pageX - tooltip.clip.width;
                  } else {
                        tooltip.left = evt.pageX + 8;
                }
                if ((evt.pageY + 4 + tooltip.clip.height) > (window.innerHeight 
+ window.pageYOffset)) {
                        tooltip.top = evt.pageY - tooltip.clip.height;
          } else {
                                tooltip.top = evt.pageY + 4;
          }
                tooltip.visibility = "show";
        }
        
        if (ie4 || ie5) {
                evt = window.event;
          tip = '<DIV CLASS="tp">' + txt + '</DIV>';
                tooltip = document.all.tipDiv;
                tooltip.innerHTML = tip;
                
                        if ((evt.clientX + 8 + tooltip.style.pixelWidth) > 
(document.body.clientWidth)) {
                                tooltip.style.pixelLeft = (evt.clientX + 
document.body.scrollLeft) - tooltip.style.pixelWidth;
                  } else {
                                tooltip.style.pixelLeft = evt.clientX + 8 + 
document.body.scrollLeft;
                }

                        if ((evt.clientY+4+tooltip.clientHeight) > 
(document.body.clientHeight)) {
                        tooltip.style.pixelTop = (evt.clientY + 
document.body.scrollTop) - tooltip.clientHeight;
                  } else {
                                tooltip.style.pixelTop = evt.clientY + 4 + 
document.body.scrollTop;
                        }

                tooltip.style.visibility = "visible";
         }

        if (ns5) {
          tip = '<DIV CLASS="tp">' + txt + '</DIV>';
                tooltip = document.getElementById('tipDiv');
                tooltip.innerHTML = tip;
                if ((evt.pageX + 8 + tooltip.offsetWidth) > (window.innerWidth 
+ window.pageXOffset)) {
                        tooltip.style.left = evt.pageX - tooltip.offsetWidth;
          } else {
                tooltip.style.left = evt.pageX + 8;
        }
                
                if ((evt.pageY + 4 + tooltip.offsetHeight) > 
(window.innerHeight + window.pageYOffset)) {
                        tooltip.style.top = evt.pageY - tooltip.offsetHeight;
          } else {
             tooltip.style.top = evt.pageY + 4;
            }
            tooltip.style.visibility = "visible";
        }
}

function h() {
  if (ns4) { tooltip.visibility = "hide" }
  if (ie4 || ie5 || ns5) { tooltip.style.visibility = "hidden" }
}
function a(txt) { self.status = txt }

function b() { self.status = "" }

function redirect( where )
{
  location.href=where;
    }

function m(d,a) {
 if (stop == 'start') {
  	global_a=a; global_d=d; stop='stop';}
     return false
 }

function login()
{
  var fm = document.loginForm;
  fm.un.value = document.unameForm.un.value;
     
  if ((fm.un.value == '') || (fm.pw.value == ''))
      alert('Please enter your username or password!');
  else
	  fm.submit();
  }

  function getRandomNum(lbound, ubound) {
  return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
  }
  function getRandomChar(number, lower, upper, other, extra) {
  var numberChars = "0123456789";
  var lowerChars = "abcdefghijklmnopqrstuvwxyz";
  var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var otherChars = "`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/? ";
  var charSet = extra;
  if (number == true)
  charSet += numberChars;
  if (lower == true)
  charSet += lowerChars;
  if (upper == true)
  charSet += upperChars;
  if (other == true)
  charSet += otherChars;
  return charSet.charAt(getRandomNum(0, charSet.length));
  }
  function getPassword(length, extraChars, firstNumber, firstLower, firstUpper, 
firstOther,
  latterNumber, latterLower, latterUpper, latterOther) {
  var rc = "";
  if (length > 0)
  rc = rc + getRandomChar(firstNumber, firstLower, firstUpper, firstOther, 
extraChars);
  for (var idx = 1; idx < length; ++idx) {
  rc = rc + getRandomChar(latterNumber, latterLower, latterUpper, latterOther, 
extraChars);
  }
  return rc;
  }

//Vars needed for Calender pop-up
var fieldname="undefined"
var blankchar = / /gi; 

function put_date_in(vl){
	//putting in the date
	  fieldname.value=vl;
	} 
function open_dates_selector(return_function) {
	if( fieldname=="undefined" || fieldname.value.replace
(blankchar,"").length==0 )
		newwin = open("dates_selector.pl?
&rf="+return_function,"dates_selector","toolbar=no,directories=no,status=no,menu
bar=no,scrollbars=no,copyhistory=no,width=675,height=482,resizable=yes");
	else { 
        	filled_day = "" + fieldname.value.substring(0,2);
		filled_month="" + fieldname.value.substring(3,6);
		filled_year="" + fieldname.value.substring(7,11);
		newwin = open("dates_selector.pl?
day="+filled_day+"&month="+filled_month+"&year="+filled_year+"&rf="+return_funct
ion,"dates_selector","toolbar=no,directories=no,status=no,menubar=no,scrollbars=
no,copyhistory=no,width=675,height=482,resizable=yes");}
	setTimeout("newwin.focus();",250);
}

//Oracle Person - Merlijn
function y(ana_id)
{open("http://aria.us.oracle.com:7777/pls/oracle/find_person?p_string="+an
[ana_id-1]);
}

Comment 11

[Paul Wyskoczka]

qa --> [e-mail]

Comment 12

[Boris Zbarsky [:bzbarsky]]

> var dom = (document.getElementById) ? true : false;

This gets set to true in Mozilla.

> var ns5 =((navigator.userAgent.indexOf("Netscape")>-1) &&dom)? true: false;

This gets set to false in Mozilla, since "Netscape" is not present in the
userAgent (it _is_ in the appName, but the userAgent is something like
"Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.0+) Gecko/20020430").

> var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
> var ns4 = (document.layers && !dom) ? true : false;
> var ie4 = (document.all && !dom) ? true : false;

These all get set to false in Mozilla.

> var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

This gets set to true(!) in Mozilla.  So the site arbitrarily decides that
Mozilla does not support dynamic things of any sort.

Further down, the function that actually brings up the tooltip (irrelevant parts
cut out):

function d(evt,txt_index,appointment) {
    if(ns4) { /* do something */ }
    if(ie4 || ie5) { /* do something */ }
    if(ns5) { /* do something */ }
 /* Screw over any standards-compliant browser which does not have "Netscape"
    in the userAgent string and do nothing */
}

So basically, the page is carefully designed to work with Netscape6 by _not_
Mozilla, even though the two are very similar (almost identical) from a DOM
standpoint.

Reassigning to evangelism....

George, any chance that whoever wrote this will actually fix it?

Comment 13

[George Metz]

I have forwarded your comments to our developers, hopefully they will correct, 
but since it is not a high priority I can only hope.  
   

Comment 14

[George Metz]

> "Thought that replacing :
> var ns5 =((navigator.userAgent.indexOf("Netscape")>-1) &&dom)? true: false;
> by :
> var ns5 =((navigator.userAgent.indexOf("Gecko")>-1) &&dom)? true: false;
> would make it work, but it doesn't..
> The tooltip gets displayed now, but does not get relocated to the right
> position.
> So there still something wrong : Netscape handles this, but Mozilla
> does not.
> Could you try that with this testcase ? What are we doing wrong ?
> Any help would be greatly appreciated."
>
> Thanks,
> Bart
[e-mail]

Comment 15

[Boris Zbarsky [:bzbarsky]]

I have sent the following email to [e-mail]:

I've made a local copy of that HTML and JS and changed the ns5-detection
to use "Gecko", after which I see the positioning problem you describe.
The reason for it is that the document is being laid out in standards
mode, whereas NS6 has a bug in how it parses doctypes that leads it to
lay out the document in "quirks" mode (see
http://www.mozilla.org/docs/web-developer/quirks/ for a description of
how we decide which mode to use and on the differences between the two
modes).

The relevant difference between the modes (from the list at
http://www.mozilla.org/docs/web-developer/quirks/quirklist.html) is:

  # The CSS parser interprets unitless numbers as px (except for
    font-size because that was what Nav4 did, and except for line-height
    and any other properties where they have distinct meaning).

What that means is that in _standards_ mode a line like:

     tooltip.style.left = evt.pageX - tooltip.offsetWidth;

Has no effect, since "left" is a length and a raw number is not a valid
value for a length, hence the CSS parser drops it.

There are two ways to make this work (I've tried both here and they seem
to do about the same thing on your page):

1)  Remove the "" from the end of your doctype (which is currently
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">).
    That will make us render in quirks mode (per
    http://www.mozilla.org/docs/web-developer/quirks/doctypes.html).

2)  Change the lines that position the tooltip to: 

     tooltip.style.left = evt.pageX - tooltip.offsetWidth + "px";
  
    (that is, just add the unit you want to the number to get a valid
    length).

I'd recommend going down route #2 if everything else on the page works
already in standards mode... :)

Comment 16

[Boris Zbarsky [:bzbarsky]]

Bart says that the page now works... George, would you mind testing that (since
you have access to the page) and marking this fixed if things are now working
correctly?

Comment 17

[George Metz]

Tested the page in question and it works perfectly.