Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hover text over link

Status
Not open for further replies.
ralphtrent

ralphtrent

Programmer
Jun 2, 2003
958
US
Hello
I would like to show a description of what the link is when a user hovers over the link, I think this can be done in CSS, but I am not sure. Can anyone help?

Thanks
 
Sort by date Sort by votes
It can be done in html.
Code: 
<a href="[URL unfurl="true"]http://www.google.com/"[/URL] title="That one famous search engine">Google</a>

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Hi

Yes, can be CSS too, like below :
Code: 
<html>
<head>
<title></title>
<style type="text/css">
span.info span {
  position: absolute;
  display: none;
  color: darkblue;
  background-color: #eee;
  border-style: outset;
  border-width: 2px;
  padding: 5px;
}
span.info:hover span {
  display: inline;
}
</style>
</head>
<body>
<span class="info">Shrek<span>big green guy</span></span> loves <span class="info">Fiona<span>big green girl</span></span>
</body>
</html>
Works in FireFox, Opera, Safari and probably Konqueror. Of course does not work in Explorer 6, but maybe works in Explorer 7. But for Explorer you can add a behavior script to work identically with the others.

So better choose a solution which involves JavaScript. You can google for "javascript tooltip", for example.

Feherke.
 
Upvote 0 Downvote
I Second Vrag. For just a text description, the title attribute is the best choice.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
And if you want feherke's solution and since you do mention links, you can change the outer span to be an anchor element (<a>) and then the custom CSS tooltip will work on IE6 as well. Without any Javascript.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
223
jjgupta915
jjgupta915
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
246
waubain
waubain
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
168
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top