chickenputty
Member
Overview: I'm trying to apply tooltips to userBanners which are purely images.
Site w/ banners: http://mcbrawl.com/threads/10860/
I'm styling user banners to be only images like so,
(Hotlinking is just temp)
However, I'm also trying to add a tooltip when you hover over the image using,
I've accomplished this on the banner style "Creative Manager" by making the user banner text:
But, I cannot think of how I would tooltip the image though because the banner text is removed and I need to apply the tooltip css to the background image.
Could anyone help me out with this?
Site w/ banners: http://mcbrawl.com/threads/10860/
I'm styling user banners to be only images like so,
Code:
.userBanner_creative {
background: url("http://i.imgur.com/mrJThXa.png") no-repeat;
height: 16px;
width: 16px;
text-indent: -10000em;
display: inline-block;
}However, I'm also trying to add a tooltip when you hover over the image using,
Code:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}I've accomplished this on the banner style "Creative Manager" by making the user banner text:
Code:
<a title="Creative Manager" class="tooltip"><font color="#000">Creative Manager</font></a>But, I cannot think of how I would tooltip the image though because the banner text is removed and I need to apply the tooltip css to the background image.
Could anyone help me out with this?
