CSS tooltips work in FF, but not in IE

Neelay

Hi all,
I'm using CSS to generate tooltips by enclosing the tooltip within
 element inside a link and then defining the style of that link
element. The example HTML and CSS is given below-
<a href='help.html'>NameEnter your name here</a>
a span {display: none;}
a:hover span {display: block;
position: absolute; top: 0; left: 0; width: 200px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background: white;
font: 10px Verdana, sans-serif; text-align: center;}
This works well in Firefox, but doesnot work in IE. IE seems to have a
problem with "a:hover span". If I define -
a span {display: block;
position: absolute; top: 0; left: 0; width: 200px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background: white;
font: 10px Verdana, sans-serif; text-align: center;}
then IE displays the tooltip continuously, which I don't want.
Is there a workaround for this problem?
Any help will be highly appreciated.

Thanks,
Neelay.

Jun 29 '06 #1

Subscribe Post Reply

1740

Eric B. Bednarz

"Neelay" <ne*****@gmail.com> writes:

I'm using CSS to generate tooltips
Don't, it's bloody annoying. If you must, use client-side script and
set reasonable timeouts.
The example HTML and CSS is given below-

No it isn't; *some* example HTML and CSS was given. In future, provide
a complete, minimal online test case.

My crystal ball tells me that you need to add something to the
declaration block of your a:hover selector, e.g.

text-indent: 0;
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jun 29 '06 #2

Jim Moe

Neelay wrote:

Hi all,
I'm using CSS to generate tooltips by enclosing the tooltip within
[...]

What's wrong with using the "title" attribute?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jun 29 '06 #3

Neelay

ok, here's the test case. If you put exp.html and style.css under the
document root, then opening exp.html and hovering your mouse over
"Name" shows "Enter your name here" in Firefox, but nothing in Internet
Explorer. Adding "text-indent: 0;" to the a:hover span block in
style.css does not solve the problem.

exp.html-
<html>
<head>
<title>Experiment</title>
<link rel="stylesheet" type="text/css"
href="./style.css" />
</head>
<body>
<a
href='nothing.html'>NameEnter your name here</a>
</body>
</html>
style.css-
a:link {color: blue; text-decoration: none}
a:visited {color: blue; text-decoration: none}
a:hover {color: red; text-decoration: none}
a span {display: none;}
a:hover span
{
display: block;
position: absolute; top: 0; left: 0; width: 200px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background: white;
font: 13px Verdana, sans-serif; text-align: left;
}

-Neelay.

Eric B. Bednarz wrote:

"Neelay" <ne*****@gmail.com> writes:
I'm using CSS to generate tooltips

Don't, it's bloody annoying. If you must, use client-side script and
set reasonable timeouts.
The example HTML and CSS is given below-

No it isn't; *some* example HTML and CSS was given. In future, provide
a complete, minimal online test case.

My crystal ball tells me that you need to add something to the
declaration block of your a:hover selector, e.g.

text-indent: 0;
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jun 29 '06 #4

Neelay

The tooltip will contain multiple sentences which fit well on the top
left corner of my page. Using the title attribute does not give me that
flexibility. Also, most browsers remove the title display after
sometime even though the mouse may still be hovering over the element.

-Neelay.

Jim Moe wrote:

Neelay wrote:
Hi all,
I'm using CSS to generate tooltips by enclosing the tooltip within
[...]

What's wrong with using the "title" attribute?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jun 29 '06 #5

Eric B. Bednarz

"Neelay" <ne*****@gmail.com> writes:

ok, here's the test case. If you put exp.html and style.css under the
document root, then opening exp.html and hovering your mouse over
"Name" shows "Enter your name here" in Firefox, but nothing in Internet
Explorer. Adding "text-indent: 0;" to the a:hover span block in
style.css does not solve the problem.

That's not what I suggested, but that's a typical TOFU symptom.
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jun 29 '06 #6

Neelay

> That's not what I suggested, but that's a typical TOFU symptom.
What's TOFU?!?

Eric B. Bednarz wrote:

"Neelay" <ne*****@gmail.com> writes:
ok, here's the test case. If you put exp.html and style.css under the
document root, then opening exp.html and hovering your mouse over
"Name" shows "Enter your name here" in Firefox, but nothing in Internet
Explorer. Adding "text-indent: 0;" to the a:hover span block in
style.css does not solve the problem.

That's not what I suggested, but that's a typical TOFU symptom.
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jun 29 '06 #7

Neredbojias

To further the education of mankind, "Neelay" <ne*****@gmail.com>
vouchsafed:

This works well in Firefox, but doesnot work in IE. IE seems to have a
problem with "a:hover span".

Try display:inline;

I used this:

a:hover #san { position:absolute;margin-top:-38px;margin-
left:2em;display:inline; }

....successfully in a link-list where "san" was the name of a span
(containing an image) within a link.

There's something about ie needing a background [a:hover,span a:hover {
background:....etc.] beforehand for it to work, too.

--
Neredbojias
Infinity has its limits.

Jun 30 '06 #8

Andy Mabbett

In message <uw***********@nntp.bednarz.nl>, Eric B. Bednarz
<be*****@fahr-zur-hoelle.orgwrites

If you must, use client-side script

Which will not work for some visitors.

and set reasonable timeouts.

Define "reasonable" in this context.
--
Andy Mabbett
Say "NO!" to compulsory ID Cards: <http://www.no2id.net/>

Free Our Data: <http://www.freeourdata.org.uk>

Jul 5 '06 #9

Eric B. Bednarz

Andy Mabbett <us**********@pigsonthewing.org.ukwrites:

Eric B. Bednarz <be*****@fahr-zur-hoelle.orgwrites

['CSS dropdown menu']

>If you must, use client-side script

Which will not work for some visitors.

Unlike CSS only, which will work for some visitors.

>and set reasonable timeouts.

Define "reasonable" in this context.

Oh, if you want: at least half a second for showing and one for hiding
widgets on mouseover events.
Maybe you care to define 'work' in this context. Why wouldn't links
work if client-side script isn't available?
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jul 5 '06 #10

Andy Mabbett

In message <m3************@nntp.bednarz.nl>, Eric B. Bednarz
<be*****@fahr-zur-hoelle.orgwrites

>['CSS dropdown menu']

>>If you must, use client-side script

Which will not work for some visitors.

Unlike CSS only, which will work for some visitors.

....and degrade gracefully for everyone else.

>>and set reasonable timeouts.

Define "reasonable" in this context.

Oh, if you want: at least half a second for showing and one for hiding
widgets on mouseover events.

And if the user as a disability which affects their reading, or reaction
speed..?

>Maybe you care to define 'work' in this context.

Degrade gracefully for those who do not enjoy use of the technology
employed by the enhancement.
--
Andy Mabbett
Say "NO!" to compulsory ID Cards: <http://www.no2id.net/>

Free Our Data: <http://www.freeourdata.org.uk>

Jul 6 '06 #11

Eric B. Bednarz

Andy Mabbett <us**********@pigsonthewing.org.ukwrites:

Eric B. Bednarz <be*****@fahr-zur-hoelle.orgwrites:

>['CSS dropdown menu']

>Oh, if you want: at least half a second for showing and one for
hiding widgets on mouseover events.

And if the user as a disability which affects their reading, or reaction
speed..?

Then it works better than without timeouts (duh).
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jul 7 '06 #12

Andy Mabbett

In message <m3************@nntp.bednarz.nl>, Eric B. Bednarz
<be*****@fahr-zur-hoelle.orgwrites

>Andy Mabbett <us**********@pigsonthewing.org.ukwrites:

>Eric B. Bednarz <be*****@fahr-zur-hoelle.orgwrites:

>>['CSS dropdown menu']

>>Oh, if you want: at least half a second for showing and one for
hiding widgets on mouseover events.

And if the user as a disability which affects their reading, or reaction
speed..?

Then it works better than without timeouts (duh).

Quite the opposite. "duh".
--
Andy Mabbett
Say "NO!" to compulsory ID Cards: <http://www.no2id.net/>

Free Our Data: <http://www.freeourdata.org.uk>

Jul 8 '06 #13

Eric B. Bednarz

Andy Mabbett <us**********@pigsonthewing.org.ukwrites:

Eric B. Bednarz <be*****@fahr-zur-hoelle.orgwrites:

>Andy Mabbett <us**********@pigsonthewing.org.ukwrites:

[timeouts for 'dropdown menu' events]

>>And if the user as a disability which affects their reading, or reaction
speed..?

Then it works better than without timeouts (duh).

Quite the opposite. "duh".

Korpela's 10th law about Usenet comes to mind. My mistake.
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Jul 8 '06 #14

Similar topics

Leaking ToolTips

by: David Ei | last post by:

I'm working on a C# Windows Forms application that is leaking memory. I've been using the SciTech NetMem Profiler 2 (A really great tool, BTW) to track down leaks. I've found one related to...

.NET Framework

Tooltips script [strange problem]

by: Mario | last post by:

I wrote a tooltips script. I've noticed "small" problem occuring while using the IE browser. If a site is long enough for a scroll to appear and we move the mouse indicator on the link then the...

Javascript

Tooltips position at prior-set location in Firefox

by: David Hayes | last post by:

I've made tooltips work in Firefox*, but tooltip doesn't appear at the specified location until the SECOND time that the user passes the mouse over the location with the mouseover event. What I...

Javascript

Adobe Acrobat Install Kills Access Tooltips

by: Wayne Aprato | last post by:

Tooltips in Access have not worked on my machine for a long time despite several reinstalls of the operating system and applications at fairly regular intervals. I have finally pinned down the...

Microsoft Access / VBA

AxWebBrowser not displaying tooltips

by: glhanson | last post by:

I am using the AxWebBrowser control to display a simple HTML page on a windows form. I want to display tooltips using the title attribute for the hrefs. The tooltips work fine when the HTML is...

C# / C Sharp

When to load Balloon tooltips

by: David Batt | last post by:

Hello I have a problem whereby I wish to setup a custom tooltip. I have the code attached to do this, it all works very wel if you have the following code in a button click event on the form ...

Visual Basic .NET

Tooltips only work once on form

by: Steve Cutting | last post by:

Hi all, Using the toolbox I added a tooltip provider to my form, and set the text for each of my buttons using the properties window. When I first show the form using .showdialog the tooltips...

Visual Basic .NET

hiding tooltips

by: Robert Smith | last post by:

Hello, I have a Tree that contains tooltips, however when I right click on a node of the tree the context menu covers up the tooltips and it looks rather unprofessional. I wish to hide the...

Visual Basic .NET

Appbar and Tooltips

by: TyBreaker | last post by:

I have a simple form with a toolstrip on it and some toolstrip buttons. Tooltips work fine. But then I use the ShAppBarMessage API call to register the form as an Application Desktop Toolbar. ...

Visual Basic .NET

re-parenting a user control causes tooltips to remember original form

by: timnels | last post by:

I have an issue where I have a user control that is launched into a floating form. At some point later, I allow the user to "unfloat" the user control by reparenting it on a split container in...

C# / C Sharp

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice