آموزش قراردادن 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="در این قسمت مشکلاتی که بار ها و بار ها پرسیده شده و می شوند گرداوری شده است !">
ممنون .
علاقه مندی ها (Bookmarks)