Tooltip زیبا با CSS

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

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

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

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