اضافه کردن تول تیپ به سایت

 در طراحی سایت  امروزه زیبایی و جالب بودن سایت حرف اول را میزند پس سعی کنید سایتی طراحی کنید که جذاب باشد.

و کاربر پسند و جالب و زیبا در راستای این حرف امروز قصد داریم یک آموزش بدهیم

تا آخر این آموزش با ما باشید

آموزش تول تیپ گذاشتن در سایت

اول باید کدهای css را در سایت بگذاریم

#tooltip
{
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
}
  
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
  
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
  
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
  
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }

و بعد از گذاشتن کدهای css میرویم سراغ کدهای Jquery

$( document ).ready( function()
{
    var targets = $( '[rel~=tooltip]' ),
        target  = false,
        tooltip = false,
        title   = false;
  
    targets.bind( 'mouseenter', function()
    {
        target  = $( this );
        tip     = target.attr( 'title' );
        tooltip = $( '<div id="tooltip"></div>' );
  
        if( !tip || tip == '' )
            return false;
  
        target.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 )
               .html( tip )
               .appendTo( 'body' );
  
        var init_tooltip = function()
        {
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).width() / 2 );
            else
                tooltip.css( 'max-width', 340 );
  
            var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                pos_top  = target.offset().top - tooltip.outerHeight() - 20;
  
            if( pos_left < 0 )
            {
                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                tooltip.addClass( 'left' );
            }
            else
                tooltip.removeClass( 'left' );
  
            if( pos_left + tooltip.outerWidth() > $( window ).width() )
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                tooltip.addClass( 'right' );
            }
            else
                tooltip.removeClass( 'right' );
  
            if( pos_top < 0 )
            {
                var pos_top  = target.offset().top + target.outerHeight();
                tooltip.addClass( 'top' );
            }
            else
                tooltip.removeClass( 'top' );
  
            tooltip.css( { left: pos_left, top: pos_top } )
                   .animate( { top: '+=10', opacity: 1 }, 50 );
        };
  
        init_tooltip();
        $( window ).resize( init_tooltip );
  
        var remove_tooltip = function()
        {
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
            {
                $( this ).remove();
            });
  
            target.attr( 'title', tip );
        };
  
        target.bind( 'mouseleave', remove_tooltip );
        tooltip.bind( 'click', remove_tooltip );
    });
});

تمام شد به همین راحتی شما هم برای سایت یا وبلاگ خود یک تولتیپ درست کردید

با آموزش طراحی سایت  همراه باشید

امیدواریم از این آموزش لذت برده باشید