مقاله: آموزش قراردادن Tooltip بسیار زیبا در ویبولتین ( همانند وی بی ایران )

درود .

همانطور که در استایل فعلی وی بی ایران مشاهده میکنید Tooltip در بعضی جاها قرار داده شده ،

همانند عکس زیر :

1.

به قالب headinclude بروید و آخرش اضافه کنید :

کد:

<script type='text/javascript' src='http://cdn.vbiran.ir/images/vbiranv6/jquery.min.js'></script><script type="text/javascript" src="http://cdn.vbiran.ir/images/vbiranv6/yousafe.js"></script>

2 . به قالب Additional.css بروید و تهش اضافه کنید :

کد:

#tooltip {
    font-family: Tahoma;
    font-size: 11px;
    text-align: center;
    text-shadow: 0 1px rgba( 0, 0, 0, .5 );
    line-height: 1.5;
    color: #fff ;
    background: #333 ;
    background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
    background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
    background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
    background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
    background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
    background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
    -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
    box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
    position: absolute;
    z-index: 100;
    padding: 15px;
}
#tooltip :after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top-color: #333 ;
    border-top: 10px solid rgba( 0, 0, 0, .7 );
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}
#tooltip .top:after {
    border-top-color: transparent;
    border-bottom-color: #333 ;
    border-bottom: 10px solid rgba( 0, 0, 0, .6 );
    top: -20px;
    bottom: auto;
}
#tooltip .left:after {
    left: 10px;
    margin: 0;
}
#tooltip .right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

3. حالا به Div یا img یا ul یا li که خواستید میتونید ، به صورت

کد:

rel="tooltip" title="متن مورد نظر شما"

اضافه کنید .

مثلا <div class="faq" rel="tooltip" title="در این قسمت مشکلاتی که بار ها و بار ها پرسیده شده و می شوند گرداوری شده است !">


ممنون .