Curiosity on hover tooltips

R

Richard

First, please do not mention eric meyer's site.
I've seen it and his method does not work in IE.
What I'm looking at doing is a css style thing for when JS has been turned
off.
The sites I have seen either do not work in IE, are to complicated to
follow, or they make it dificult to find the css page.
One site I did see looked good, but it used a script.
All the other sites I saw just say stuff about using the span title trick.
Ok. I can live with that. But what I want to know is, how do you add a new
line to the title?
Or style it so that it shows in a specific block size even?
It should be doable.
I just need to see how it's done.
Which also works in IE.
 
H

Hywel Jenkins

First, please do not mention eric meyer's site.
I've seen it and his method does not work in IE.
What I'm looking at doing is a css style thing for when JS has been turned
off.
The sites I have seen either do not work in IE, are to complicated to
follow, or they make it dificult to find the css page.
One site I did see looked good, but it used a script.
All the other sites I saw just say stuff about using the span title trick.
Ok. I can live with that. But what I want to know is, how do you add a new
line to the title?
Or style it so that it shows in a specific block size even?
It should be doable.
I just need to see how it's done.
Which also works in IE.

Come on Bullis. You're the man* with all the answers - surely you can
do this?

*Used only to indicate "non-female".
 
J

JDS

First, please do not mention eric meyer's site
eric meyer's site eric meyer's site eric meyer's site eric meyer's site
eric meyer's site eric meyer's site eric meyer's site

nyeah-hah!
 
F

Fat Sam

Hywel said:
Come on Bullis. You're the man* with all the answers - surely you can
do this?

*Used only to indicate "non-female".

LOL...He's a man in the same sense that a dinner-plate or a cinema-ticket is
a man......
 
B

Bernhard Sturm

Richard said:
First, please do not mention eric meyer's site.
You started it. I never said anything about eric meyer's site. But you
are right we should not mention eric meyer's site. It's the EM word. shhh...
I've seen it and his method does not work in IE.
Yeah. it's EM not IE.
What I'm looking at doing is a css style thing for when JS has been turned
off.
Are you heading in another direction now? Cured?
The sites I have seen either do not work in IE, are to complicated to
follow, or they make it dificult to find the css page.
You can't find the CSS? Last time I checked it was there.
One site I did see looked good, but it used a script.
I saw this site as well. In was somewhere on the internets.
All the other sites I saw just say stuff about using the span title trick.
So we have 1 site with a script and all the others use a span title
trick? Wait until my site goes online. It has both features!
Ok. I can live with that. But what I want to know is, how do you add a new
line to the title?
within the title? why not using <br /> for a while, and later on doing
Or style it so that it shows in a specific block size even?
It should be doable.
I am afraid everything is doable.
I just need to see how it's done.
me too..
Which also works in IE.
don't worry.. IE will sooner or later disappear. As we all will :(
 
S

Steve Pugh

Richard said:
First, please do not mention eric meyer's site.
I've seen it and his method does not work in IE.

If you're talking about this one:
http://www.meyerweb.com/eric/css/edge/popups/demo.html
then it does work in IE.

The one thing that Eric Meyer doesn't mention is that unless you have
some properties in the a:hover {} styles then the a:hover span {}
styles which make the caption visible won't be applied in IE.
What I'm looking at doing is a css style thing for when JS has been turned
off.

All the other sites I saw just say stuff about using the span title trick.
Ok. I can live with that. But what I want to know is, how do you add a new
line to the title?

title="first line
second line"

Works in some browsers.
Or style it so that it shows in a specific block size even?

Not possible. The title tooltip is an Operating Stystem component and
hence out of a web page author's control.
It should be doable.
I just need to see how it's done.
Which also works in IE.

a {position: relative;}
a:hover { color: #000; } /* some style needed here for IE */
a span {display: none;}
a:hover span {display: block; text-decoration: none; color: #000;
position: absolute; top: 0.5em; left: 1em; width: 6em;
padding: 0.25em; z-index: 100; border: 1px solid red; background:
yellow none; }

<a href="">link text <span>tooltip text<br>on two lines</span></a> |
<a href="">second link<span>tooltip for second link</span></a> |
<a href="">another link<span>tooltip text<br>on two lines</span></a> |
<a href="">link text <span>tooltip text<br>on two lines</span></a>

Works in IE, Opera and Gecko. Degradation in non-CSS browsers is a bit
messy but that cam be helped with some extra work. The captions
completely fail to appear in Netscape 4 (but so would titles).

Steve
 
B

Bernhard Sturm

Richard said:
A=2
Do While a>0
Slap the monkey
Bang head on wall
A=A+1

End

I wonder why you need any variable at all for this... the monkey will
never be slapped with your code.
 
B

Bernhard Sturm

Steve said:
Works in IE, Opera and Gecko. Degradation in non-CSS browsers is a bit
messy but that cam be helped with some extra work. The captions
completely fail to appear in Netscape 4 (but so would titles).

Steve

Steve, you are a star. I never figuered out what richard wanted to ask.
You will get the NG award :)

bernhard
 
H

Hywel Jenkins

I wonder why you need any variable at all for this... the monkey will
never be slapped with your code.

Depends on the language. I imagine it's BASIC (this is Bullis we're
talking about), so if it compiles, it'll slap the monkey, and bang its
head on the wall. It would only do it once before finishing, though,
and it looks as though the "End" statement is redundant. I guess RtS is
a Microsoft developer - all the extra bloat (Do, increment, End) gives
it away.

OTOH, if it's a strongly-typed language, the variable "a" could have any
value under the sun since it hasn't been declared or initialised.
 
H

Hywel Jenkins

Steve, you are a star. I never figuered out what richard wanted to ask.
You will get the NG award :)

Luckily you won first prize, too. That's one evening out with Richard.
Second prize was two nights out with him, and third was a whole week.
 
B

Bernhard Sturm

Hywel said:
Depends on the language. I imagine it's BASIC (this is Bullis we're
talking about), so if it compiles, it'll slap the monkey, and bang its
head on the wall.

I guess it will only do:
"Missing loop statement at line 7" (assuming it is some flavour of VB)
and the monkey will never be slapped.. poor monkey.
there is no need to register a variable in VB, and they are also not
case sensitive. So this part should work...
 
R

Richard

If you're talking about this one:
http://www.meyerweb.com/eric/css/edge/popups/demo.html
then it does work in IE.
The one thing that Eric Meyer doesn't mention is that unless you have
some properties in the a:hover {} styles then the a:hover span {}
styles which make the caption visible won't be applied in IE.
See above. Remember that as IE only supports :hover for <a> elements
then those are the only elements you can add CSS 'tooltips' to.
title="first line
second line"
Works in some browsers.
Not possible. The title tooltip is an Operating Stystem component and
hence out of a web page author's control.
a {position: relative;}
a::hover { color: #000; } /* some style needed here for IE */
a span {display: none;}
a::hover span {display: block; text-decoration: none; color: #000;
position: absolute; top: 0.5em; left: 1em; width: 6em;
padding: 0.25em; z-index: 100; border: 1px solid red; background:
yellow none; }
<a href="">link text <span>tooltip text<br>on two lines</span></a> |
<a href="">second link<span>tooltip for second link</span></a> |
<a href="">another link<span>tooltip text<br>on two lines</span></a> |
<a href="">link text <span>tooltip text<br>on two lines</span></a>
Works in IE, Opera and Gecko. Degradation in non-CSS browsers is a bit
messy but that cam be helped with some extra work. The captions
completely fail to appear in Netscape 4 (but so would titles).

Granted that works in IE and is fine for descriptions.
I can place an image in the span with no problem.
Question is, how do you simulate an onclick in css?
Because as soon as you move out of the hovered area, the span description
evaporates.
Is there a way to show the larger image on the same page as I've done so
far?
As I am working on a <noscript> redirect page and would prefer not to have a
new page open just to display the larger image.
 
D

Duende

While sitting in a puddle Fat Sam scribbled in the mud:
LOL...He's a man in the same sense that a dinner-plate or a
cinema-ticket is a man......

Like you don't have a MAN sized dinner-plate. You really shouldn't mention it
in reference to rts.
 
S

Steve Pugh

Richard said:
Question is, how do you simulate an onclick in css?

You can't. CSS is pure presentation. Functionality must be handled by
HTML or scripting.
Because as soon as you move out of the hovered area, the span description
evaporates.

You wanted a tooltip, you got a tooltip.
Is there a way to show the larger image on the same page as I've done so
far?

Without scripting? No.
As I am working on a <noscript> redirect page

Shouldn't be necessary.
and would prefer not to have a
new page open just to display the larger image.

Then don't open a new page, link directly to the image.

Steve
 
B

Barbara de Zoete

First, please do not mention eric meyer's site.
I've seen it and his method does not work in IE.
What I'm looking at doing is a css style thing for when JS has been turned
off.
The sites I have seen either do not work in IE, are to complicated to
follow, or they make it dificult to find the css page.
One site I did see looked good, but it used a script.
All the other sites I saw just say stuff about using the span title trick.
Ok. I can live with that. But what I want to know is, how do you add a new
line to the title?
Or style it so that it shows in a specific block size even?
It should be doable.
I just need to see how it's done.
Which also works in IE.

Man, do you have a problem.

If above is the way you think[1] I can now see why html is so hard for you.
Giving structure to content needs someone to understand and see the structure
first.

That is not going to happen with you, is it?



[1] No paragraphs, no logical start or stop, no reasoning, just one liners,
sometimes, almost like a coincedence related.

--
,-- --<--@ -- 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 |
`-------------------------------------------------- --<--@ ------------'
 
T

Toby Inkster

Bernhard said:
"Missing loop statement at line 7" (assuming it is some flavour of VB)
and the monkey will never be slapped.. poor monkey.

IIRC, in BASIC, DO needs a counterpart LOOP.

For example:

10 A% = 1
20 DO WHILE A% < 11
30 WRITE "I can count to " ; A%
40 A% = A% + 1
50 LOOP

Which is the equivalent of the following in Perl/PHP:

$a = 1;
while ($a < 11) {
print "I can count to $a\n";
$a = $a+1;
}

or more concisely:

for ( $a=1 ; $a<11 ; $a++ ) {
print "I can count to $a\n";
}
 
R

Richard

Depends on the language. I imagine it's BASIC (this is Bullis we're
talking about), so if it compiles, it'll slap the monkey, and bang its
head on the wall. It would only do it once before finishing, though,
and it looks as though the "End" statement is redundant. I guess RtS
is
a Microsoft developer - all the extra bloat (Do, increment, End) gives
it away.
OTOH, if it's a strongly-typed language, the variable "a" could have
any
value under the sun since it hasn't been declared or initialised.

Which goes to prove you know absolutely nothing of programming in BASIC.

The numeric variable A is initiliazed to 2.
Do while A>0 is nothing more than a fancier for/next loop.
The looping is automatic until the condition is met.
Since A is always greater than 0 (zero), it is an endless loop.

In BASIC, string variables were identied with $.
A$="Kiss my ass".

Even Javascript has a similar routine, as does visual basic and c++.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top