Tooltip زیبا با CSS

بازدید27.7kپست ها1آخرین فعالیت6 سال پیش
0
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 میاد

سوال برنامه نویسی دارید؟

هیچ وقت در پرسیدن سوال شک نکنید

خوش آمدید

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