Tooltip زیبا با CSS

CSS

توسط daniel در 6 سال پیش
0 27.7k 1 6 سال پیش
daniel animeiran
0
<a href="#">Roll over here <span>Pure Css Tooltip</span></a>
     
    <style type="text/css">
     
    /* general */
     
    body {
    margin:0;
    padding:40px 80px;
    background:#fff;
    font:70% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
    }
    h1, h2{
    font-size:180%;
    font-weight:normal;
    color:#555;
    }
    h2{
    font-size:140%;
    }
    p{
    margin:1em 0;
    width:500px;
    }
    a{
    color:#f20;
    text-decoration:none;
    }
    a:hover{
    color:#999;
    }
     
    /* // here comes the goodnes */
     
    a{
    z-index:10;
    }
    a:hover{
    position:relative;
    z-index:100;
    }
    a span{
    display:none;
    }
    a:hover span{
    display:block;
    position:absolute;
    float:left;
    white-space:nowrap;
    top:-2.2em;
    left:.5em;
    background:#fffcd1;
    border:1px solid #444;
    color:#444;
    padding:1px 5px;
    z-index:10;
    }
     
    /* // goodnes */
     
    /* // general */
     
    </style>
0

سلام
روش خیلی خوبیه اما همه جا کاربردی نیست مثلا اگر title گذاشته باشیم دو تا tooltip میاد

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.