CSS hover Box

jdunhin

Active member
Registered
Joined
Feb 27, 2013
Messages
72
Points
0
Hi

Popupbox over a link. This is very cool and you can get creative! Sorry it feels like I am spamming the forum but I decided to share my notes on this forum...

Code:

css:
/*************tooltip***************************/
.tooltip {
cursor: hand;
text-decoration: none !important;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
color: #000000;
}
.tooltip:hover span {
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); //browser
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); //browser
font-family: arial,Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover em {
font-family: arial, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}

.info {
background: #FFFFFF;
border: 1px solid #000000;
}

html a:hover {
background: transparent;
}

html:
<div id='ID'><a class="tooltip" href="http://LINK"><span class="CUSTOMINFO"><em>HEADING</em>INFO</span></a> </div>
 
Older Threads
Replies
0
Views
2,146
Replies
8
Views
3,960
Replies
1
Views
3,119
Replies
1
Views
2,534
Newer Threads
Replies
0
Views
2,749
Replies
3
Views
3,352
Replies
1
Views
2,435
Recommended Threads
Replies
32
Views
15,861
Replies
2
Views
3,577
Replies
1
Views
2,984
Replies
3
Views
4,767

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top