By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,728 Members | 2,480 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,728 IT Pros & Developers. It's quick & easy.

Making tooltips stay longer...

P: n/a
Hi,

Is there a way to make windows tooltips stay up longer than the default
5 seconds using CSS in a web page? I'd prefer to have it stay visible
as long as the mouse is over the "whatever." The reason: I've been
creating web pages and using various javascripts for the tooltip
popups, and they are fine and very "tweakable." But, I'd prefer to just
use the "title" and/or the "alt" attribute and somehow alter it so that
viewers to my pages can read the entire tooltip before it disappears.
Thanks!

PlainDave
DDAS Web Design <--(wishful thinking!)

Nov 24 '05 #1
Share this Question
Share on Google+
21 Replies


P: n/a
"PlainDave" <dd*****@gmail.com> wrote:
Is there a way to make windows tooltips
No such thing, a visual browser may display title content in a pop up
box, but it may also (be configured to) do nothing with it. Nowt to do
with a particular OS.
stay up longer than the default
5 seconds using CSS in a web page?
Again no such thing, there is no "default". Any pop up box display
duration will vary across browsers and fortunately there's nothing web
code can do to change that duration.
I'd prefer to have it stay visible
as long as the mouse is over the "whatever." The reason: I've been
creating web pages and using various javascripts for the tooltip
popups, and they are fine and very "tweakable." But, I'd prefer to just
use the "title" and/or the "alt" attribute and somehow alter it so that
viewers to my pages can read the entire tooltip before it disappears.


You could use a CSS method to display text on hover, but to display alt
or title attribute content would require a browser that supports
generated content, needless to say that this doesn't include IE. If IE
compatibility is required all you could do is insert the text as page
content in the document, hide it by default and then revealing it on
mouse over. Needless to say that you should consider if coding such text
as page content is appropriate, your document should work with CSS
disabled.

I'd suggest that there is a reason why "tooltip" pop ups disappear after
a certain time, they obscure/cover part of the display. If a user needs
more time to read the content you should ask yourself if you are using
the title attribute and its content appropriately.

Appropriately used, if a user wants more time to read he/she will be
able to move the focus off and back on again to make it reappear.

--
Spartanicus
Nov 24 '05 #2

P: n/a
Thu, 24 Nov 2005 10:54:14 GMT from Spartanicus
<in*****@invalid.invalid>:
Again no such thing, there is no "default". Any pop up box display
duration will vary across browsers and fortunately there's nothing web
code can do to change that duration.


It would be nice, however, if the user could vary that by browser
settings. If there's a way to do it in Mozilla, I couldn't find it n
"about:config".

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you
Nov 24 '05 #3

P: n/a
How does one use a CSS method to display text on hover? That would be
perfect for my needs, or at least it would be nice to know. Thanks!

PlainDave

Spartanicus wrote:
You could use a CSS method to display text on hover, but to display alt

-----snip-----

Nov 24 '05 #4

P: n/a
PlainDave wrote on 24 nov 2005 in
Spartanicus wrote:
You could use a CSS method to display text on hover, but to display alt

[please do not toppost on usenet]
How does one use a CSS method to display text on hover? That would be
perfect for my needs, or at least it would be nice to know. Thanks!


<style ...>
a.showHovering {visibility:hidden;}
a.showHovering:hover {visibility:visible;}

........................

<a href='#' class='showHovering'>Hello!</a>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Nov 24 '05 #5

P: n/a
> [please do not toppost on usenet]

Sorry about that. I've been using USENET for about 10 1/2 years, and I
had to look up "toppost" to see what you were talking about. I really
should read more! :-)
<style ...>
a.showHovering {visibility:hidden;}
a.showHovering:hover {visibility:visible;}
I put the above in the head tag, and I put the line below in the body
of my test page. For some reason, I can't get anything to show up on
the page.
<a href='#' class='showHovering'>Hello!</a>


Am I supposed to see "Hello!"? Any help would be highly appreciated.

PlainDave

Nov 25 '05 #6

P: n/a
PlainDave wrote on 25 nov 2005 in
comp.infosystems.www.authoring.stylesheets:
Am I supposed to see "Hello!"? Any help would be highly appreciated.


This will work, IE&FF tested,
first try it in a seperate HTML:

============ HoverTest.html ==============

<style type="text/css">
a.showHovering {color:navy;background-color:navy;
font-size:20pt;padding:20px;}
a.showHovering:hover {color:yellow;}
</style>

<body>

<a href='#' class='showHovering'>Hello!</a>

===========================
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Nov 25 '05 #7

P: n/a
In message <Xn********************@194.109.133.242>, Evertjan.
<ex**************@interxnl.net> writes
PlainDave wrote on 25 nov 2005 in
comp.infosystems.www.authoring.stylesheets:
Am I supposed to see "Hello!"? Any help would be highly appreciated.


This will work, IE&FF tested,
first try it in a seperate HTML:

============ HoverTest.html ==============

<style type="text/css">
a.showHovering {color:navy;background-color:navy;
font-size:20pt;padding:20px;}
a.showHovering:hover {color:yellow;}
</style>

<body>

<a href='#' class='showHovering'>Hello!</a>

===========================

It only works correctly in Opera (8.51) for me... MSIE and FF ignore the
background colour and the Font-size...
--
Chris Hughes
"Reality is that which, when you cease to believe, continues to exist."
http://www.epicure.demon.co.uk
Nov 25 '05 #8

P: n/a
On Fri, 25 Nov 2005 10:04:57 +0100, Evertjan.
<ex**************@interxnl.net> wrote:
PlainDave wrote on 25 nov 2005 in
comp.infosystems.www.authoring.stylesheets:
Am I supposed to see "Hello!"? Any help would be highly appreciated.


This will work, IE&FF tested,
first try it in a seperate HTML:

============ HoverTest.html ==============

<style type="text/css">
a.showHovering {color:navy;background-color:navy;
font-size:20pt;padding:20px;}
a.showHovering:hover {color:yellow;}
</style>

<body>

<a href='#' class='showHovering'>Hello!</a>

===========================


This is not coming near any tooltip I would recommend. A tooltip that
would work (though not in IE, so for IE there is the ol' title attribute)
is more like:

<URL:http://home.wanadoo.nl/b.de.zoete/_test/tooltips_with_markup_and_css.html>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Nov 25 '05 #9

P: n/a
The Major wrote on 25 nov 2005 in
comp.infosystems.www.authoring.stylesheets:
In message <Xn********************@194.109.133.242>, Evertjan.
<ex**************@interxnl.net> writes
PlainDave wrote on 25 nov 2005 in
comp.infosystems.www.authoring.stylesheets:
Am I supposed to see "Hello!"? Any help would be highly appreciated.


This will work, IE&FF tested,
first try it in a seperate HTML:

============ HoverTest.html ==============

<style type="text/css">
a.showHovering {color:navy;background-color:navy;
font-size:20pt;padding:20px;}
a.showHovering:hover {color:yellow;}
</style>

<body>

<a href='#' class='showHovering'>Hello!</a>

===========================

It only works correctly in Opera (8.51) for me... MSIE and FF ignore the
background colour and the Font-size...


I cannot believe that. Sorry.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Nov 25 '05 #10

P: n/a
In article <op.s0skh1ndx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:
This is not coming near any tooltip I would recommend. A tooltip that
would work (though not in IE, so for IE there is the ol' title attribute)
is more like:

<URL:http://home.wanadoo.nl/b.de.zoete/_t...p_and_css.html


Looks very nice in Safari on Macintosh. Bold white headline on a blue
background, yellow background on the text, and a nice border, with the
tooltip at the left hand margin. The cursor changes from arrow to
question mark.

Opera 8.02 on Mac displays the tooltips just after the word, as does
Firefox, rather than in the left hand margin. Opera fails to display
the cursor change to a question mark. Firefox adds the question mark
next to the usual arrow cursor. Sounds like a pretty graceful fallback
to me.

I was just wondering why the Google advertisment was only visible in
Firefox, but I realised I had Javascript off in the others.

I am however at a total loss as to where you styled <acronym
title="Internet Explorer" class="definition">IE</acronym> to have a
dotted black (not maroon) underline. It shows up in Firefox and Opera,
but not Safari.

--
http://www.ericlindsay.com
Nov 26 '05 #11

P: n/a
In article <op.s0skh1ndx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:

[...]
A tooltip that
would work (though not in IE, so for IE there is the ol' title attribute)
is more like:

<URL:http://home.wanadoo.nl/b.de.zoete/_test/tooltips_with_markup_and_css.html>


This sort of thing of course looks very appealing at first sight, but in
the end CSS-dependancy never is a good idea. Just think of how this
would look to a search engine, or any other user-agent that doesn't
speak CSS:

"Let's see how one can create a tooltip Tooltip: a small, informative
text that pop's up in the browser screen, if a visitor has a mouse
pointer hovering over an element with markup Markup: code that gives
structure and meaning to content and CSS CSS, Cascading Style Sheets: a
way to layout and format the content, if well structured ."

Instead of "Let's see how one can create a tooltip with markup and CSS ."

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Nov 26 '05 #12

P: n/a
In article <NO********************************@freenews.iinet .net.au>,
Eric Lindsay <NO**********@ericlindsay.com> wrote:
In article <op.s0skh1ndx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:
[...]
<URL:http://home.wanadoo.nl/b.de.zoete/_test/tooltips_with_markup_and_css.html>


[...]
I am however at a total loss as to where you styled <acronym
title="Internet Explorer" class="definition">IE</acronym> to have a
dotted black (not maroon) underline. It shows up in Firefox and Opera,
but not Safari.


Browser's built-in Style Sheet.

To the best of my knowledge, this one started with iCab, whose built-in
Style Sheet did this many years ago already. I liked it and stole it -
added ABBR, ACRONYM {border-bottom: dotted; cursor:help} to my site. I
think it was Eric Meyer who picked that up and gave it so much
widespread attention that it ended up with some browser developers
adding it to the built-in Style Sheet.

Now let's see if 5 years from now we can similarly look back on
user-friendlier hyperlinks:
<http://www.euronet.nl/~tekelenb/WWW/userfriendlierhyperlinks/> :)

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Nov 26 '05 #13

P: n/a
In article
<ia********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:

[...]
I'd suggest that there is a reason why "tooltip" pop ups disappear after
a certain time, they obscure/cover part of the display. If a user needs
more time to read the content you should ask yourself if you are using
the title attribute and its content appropriately.


It is not written in stone that such content must be presented through
tooltips. Not every system even has a concept like tooltips available.
An alternative for instance could be to render such content in the
status bar, which has the advantage of not obscuring page content. In
other words, I think this a browser issue, not something Web publishers
should adjust their content/markup to.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Nov 26 '05 #14

P: n/a
On Sat, 26 Nov 2005 06:50:28 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:
In article <op.s0skh1ndx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:

[...]
A tooltip that
would work (though not in IE, so for IE there is the ol' title
attribute)
is more like:

<URL:http://home.wanadoo.nl/b.de.zoete/_test/tooltips_with_markup_and_css.html>


This sort of thing of course looks very appealing at first sight, but in
the end CSS-dependancy never is a good idea. Just think of how this
would look to a search engine, or any other user-agent that doesn't
speak CSS:


I agree and do explain that in that very same page when I say:
<quote>
Keep in mind that in a text browser all is visible at once (the content
that has a tooltip and the tooltip itself and the replacement content for
IE too). This can be a bit much and you can't setup a special style sheet
for a text browser, now can you.

This also means that visitors that don't actually see the content (but get
it through an aural browser for example), and search enige bots, get all
the content at the same time too, as does someone with a browser that
doesn't support CSS. For the aural browser you could setup a specific
style sheet. The search eninge might think that you're spamming your
keywords, so be careful about how you implement the double content.
</quote>
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Nov 26 '05 #15

P: n/a
Sander Tekelenburg <us**@domain.invalid> wrote:
In article
<ia********************************@news.spartani cus.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:

[...]
I'd suggest that there is a reason why "tooltip" pop ups disappear after
a certain time, they obscure/cover part of the display. If a user needs
more time to read the content you should ask yourself if you are using
the title attribute and its content appropriately.
It is not written in stone that such content must be presented through
tooltips. Not every system even has a concept like tooltips available.


That point was made already, but you snipped it:
No such thing, a visual browser may display title content in a pop up
box, but it may also (be configured to) do nothing with it. Nowt to do
with a particular OS.


--
Spartanicus
Nov 26 '05 #16

P: n/a
On Sat, 26 Nov 2005 06:50:28 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:
In article <op.s0skh1ndx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:

[...]
A tooltip that
would work (though not in IE, so for IE there is the ol' title attribute)
is more like:

<URL:http://home.wanadoo.nl/b.de.zoete/_test/tooltips_with_markup_and_css.html>


Ouch! That has a rather nasty accident in Opera 7.23. Must try Opera 8
sometime ...

This sort of thing of course looks very appealing at first sight, but in
the end CSS-dependancy never is a good idea. Just think of how this
would look to a search engine, or any other user-agent that doesn't
speak CSS:

"Let's see how one can create a tooltip Tooltip: a small, informative
text that pop's up in the browser screen, if a visitor has a mouse
pointer hovering over an element with markup Markup: code that gives
structure and meaning to content and CSS CSS, Cascading Style Sheets: a
way to layout and format the content, if well structured ."

Instead of "Let's see how one can create a tooltip with markup and CSS ."


Good point. I frequently disable styling in Opera to cope with
microfonts, horrible colour schemes etc. (Not that I'm suggesting it's
ever necessary with Barbara's pages.) And while ingenious, it's awfully
complex.

Here's a suggestion that someone with more time available than me in the
next few days might like to try:
- put the tooltips in DIVs at the bottom of the page, with display:none;
- position and display them with Javascript (onmouseover / onmouseout)
for the circa 80% of users with Javascript;
- provide a title which is removed by the Javascript for those people
with no Javascript but with title display.

Will work for most graphical browsers I think, is more acceptable for
text browsers, and also makes the tooltop text available to search
engines (should that be important).

I have to admit I seem to have wandered off-topic though ...

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Nov 26 '05 #17

P: n/a
In article <us************************@freeloader.wanadoo.nl> ,
Sander Tekelenburg <us**@domain.invalid> wrote:
In article <NO********************************@freenews.iinet .net.au>,
Eric Lindsay <NO**********@ericlindsay.com> wrote:
I am however at a total loss as to where you styled <acronym
title="Internet Explorer" class="definition">IE</acronym> to have a
dotted black (not maroon) underline. It shows up in Firefox and Opera,
but not Safari.
Browser's built-in Style Sheet.


Doh! Thanks for explaining that Sander. Not being able to figure out
where that came from was driving me nuts.
Now let's see if 5 years from now we can similarly look back on
user-friendlier hyperlinks:
<http://www.euronet.nl/~tekelenb/WWW/userfriendlierhyperlinks/> :)


I like it. Be a bit of work to add types to links, given most of us
probably haven't any idea exactly which MIME type matches whatever
method is used to identify files in our particular operating system.
However I guess most people don't use a lot of links to things that are
not web pages. Hmm, is Windows still using file extensions to match
files to applications? OS X seems to have now started moving to UTI,
and maps back to MIME and file extensions back to them. Maybe I can ask
the OS to supply the MIME type, since Spotlight should know the UTI.

Still, I'm pretty sure I would only have a dozen or so files on my web
site that are not web centered html, or jpg or gif. Wouldn't take much
to add a type attribute to all the pointers to pdf. Hmm. I think I'll
do it. I take it IE and Opera ignore it completely, like they should,
rather than doing something silly?

--
http://www.ericlindsay.com
Nov 26 '05 #18

P: n/a
In article
<rj********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:
Sander Tekelenburg <us**@domain.invalid> wrote:


[...]
It is not written in stone that such content must be presented through
tooltips. Not every system even has a concept like tooltips available.


That point was made already, but you snipped it:
No such thing, a visual browser may display title content in a pop up
box, but it may also (be configured to) do nothing with it. Nowt to do
with a particular OS.


That's not the same point. It suggests this is a "tooltips or nothing"
situation, which would support the "if 5 seconds is too short to read a
TITLE attribute you shouldn't be using TITLE" argument, which I disagree
with.

My point was that browsers might render TITLE in *different* ways and
that I see no good reason for authors to author for any of those ways
specifically. It's up to the browser to provide convenient access to
content, including TITLE attributes. If a user doesn't like
content-hiding, too-quickly-disappearing tooltips, the problem is with
the browser, not the site.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Nov 27 '05 #19

P: n/a
Sander Tekelenburg <us**@domain.invalid> wrote:
>It is not written in stone that such content must be presented through
>tooltips. Not every system even has a concept like tooltips available.


That point was made already, but you snipped it:
>No such thing, a visual browser may display title content in a pop up
>box, but it may also (be configured to) do nothing with it. Nowt to do
>with a particular OS.


That's not the same point. It suggests this is a "tooltips or nothing"
situation


A double "may" indicates that it's not a choice between the 2 listed
options.

--
Spartanicus
Nov 27 '05 #20

P: n/a
In article <NO********************************@freenews.iinet .net.au>,
Eric Lindsay <NO**********@ericlindsay.com> wrote:
In article <us************************@freeloader.wanadoo.nl> ,
Sander Tekelenburg <us**@domain.invalid> wrote:
[...]
<http://www.euronet.nl/~tekelenb/WWW/userfriendlierhyperlinks/> :)


I like it. Be a bit of work to add types to links, given most of us
probably haven't any idea exactly which MIME type matches whatever
method is used to identify files in our particular operating system.


Well, if you serve files on the Web, you'd better make sure your server
provides proper Content-Type headers, so you need to know the right MIME
types anyway. I don't think adding TYPE attributes changes that.

For people who use HTML-generating tools, those tools could easily
automagically insert a proper TYPE attribute. (Which doesn't cover it
all - a correct TYPE attribute alone still leaves the issue of having to
configure the server to send proper Content-Type headers.)
However I guess most people don't use a lot of links to things that are
not web pages.
That's part of the problem :) Most links point to Web pages, so one
pointing to a PDF often surprises people.
Hmm, is Windows still using file extensions to match
files to applications? OS X seems to have now started moving to UTI,
and maps back to MIME and file extensions back to them. Maybe I can ask
the OS to supply the MIME type, since Spotlight should know the UTI.
For Mac OS X, RCDefaultApp provides convenient acces to this aspect of
LaunchServices.

To check what Content-Type your server sends, you can use iCab (through
its log function) or lynx or curl:

$ lynx -head -dump <URL>
$ curl -I <URL>

curl is part of the default Mac OS X install.

[...]
I take it IE and Opera ignore it completely, like they should,
rather than doing something silly?


That's my experience, yes. But even if they would do something silly,
IMO that's no good reason to change your HTML/CSS. The more Web
publishers try to hide bugs in browsers, the less incentive for those
browsermakers to fix those bug. Better to have those bugs visible.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Nov 27 '05 #21

P: n/a
In article <op.s0uax5tlx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:
On Sat, 26 Nov 2005 06:50:28 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:
In article <op.s0skh1ndx5vgts@zoete_b>,
"Barbara de Zoete" <b_********@hotmail.com> wrote:
[...]
<URL:http://home.wanadoo.nl/b.de.zoete/_t...rkup_and_css.h
tml>


[...]Just think of how this
would look to a search engine, or any other user-agent that doesn't
speak CSS [...]


I agree and do explain that in that very same page when I say:
<quote>
Keep in mind that in a text browser all is visible at once [...]


My apologies. I only looked at your method and ignored the content...

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Nov 28 '05 #22

This discussion thread is closed

Replies have been disabled for this discussion.