如何在我的CSS文件中为图标添加工具提示

Question

I have the following icon , which is used mainly on most of my asp.net mvc web pages:-

<i class=" icon icon-blue icon-star-on "></i>

The related CSS classes for this icon is :-

 .active .icon32.icon-star-on,.icon32.icon-star-on,.icon32.icon-star-on:hover {background-position : -448px -96px ;}
 .icon.icon-blue,.icons-blue .icon {background-image : url('../img/opa-icons-blue16.png') ;}

But I need to add a tootip for the icon, so that when a use move the mouse over the icon to show a tooltip. So is there a way to define the tooltip inside my CSS , so that I do not have to add the tooltip manually on each screen? Thanks

Answer 1

Yes, by using :after :

.icon:hover:after {
    content: "Your tooltip";
    display: block;
    position: relative;
    top: -16px;
    right: -16px;
    width: 100px;
    background: lightblue;
}

Also check the demo .

Please note that all .icon classes get the same tooltip. This is pure CSS solution. If you want them to be different for each icon, you could use different classes, or use jQuery.

Answer 2

Add this code to your css:

.tooltip {
    display: inline;
    position: relative;
}
.tooltip:hover {
    text-decoration: none;
}
.tooltip:hover:after{
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 18px;
    color: #fff;
    content: attr(title);
    display: block;
    left: 50%;
    padding: 5px 15px;
    position: absolute;
    white-space: nowrap;
    z-index: 98;
}
.tooltip:hover:before{
    border: solid;
    border-color: #111 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 12px;
    content: "";
    display: block;
    left: 75%;
    position: absolute;
    z-index: 99;
}

Add aa title to your icon title="Tooltip text" and add the class of tooltip to the icon.

Source: http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY

Answer 3

Add an attribute with the text for the element and use it for hovering. I have showed using an anchor tag.

html

<a href="#" title="you have hovered">Hover here</a>

css

.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: 220px;
}
.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;
}

' http://jsfiddle.net/Kxnqx/ '