Tooltip زیبا با CSS

CSS

توسط daniel در 4 سال پیش
0 641 1 4 سال پیش
danielanimeiran
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 میاد

خوش آمدید

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

لطفا ابتدا لاگین کنید