css dla tooltip

css dla tooltipa

[title]{
    position:relative;
}
[title]:after{
    content:attr(title);
    color:#fff;
    background:#333;
    background:rgba(36,36,129,0.85);
    padding:5px;
    position:absolute;
    left:-9999px;
    opacity:0;
    bottom:100%;
    white-space:nowrap;
    -webkit-transition:0.25s linear opacity;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
[title]:hover:after{
    left:5px;
    opacity:1;
}

źródło: http://csswizardry.com/2010/11/improving-css-tooltips/

Reklamy