طراحی سایت | طراحی سایت تهران | طراحی سایت ارزان

مشاوره طراحی سایت: 66467942-021
به نام بهترین طراح دنیا

امتیاز کاربران

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

 

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

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

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

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

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

اول باید کدهای 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 );
    });
});

 

 

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

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

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

 

 

درباره نويسنده

رضا رجب پور هستم کارشناسي رشته فناوري اطلاعات و ارتباطات 4 سال تجربه کاري در زمينه طراحي سايت و بهينه سازي سايت را دارم و به زبانهاي Html , CSS , CSS3 , Jquery , JavaScript , PHP تسلط کافي را دارم و مدير تيم مهندسين ساين وب که با چند تن از دوستان رشته نرم افزار و گرافيک يک تيم خلاق و با تجربه را ايجاد کرده ايم و بيش از 80 نمونه کار طراحي سايت و بهينه سازي سايت در ايران و خارج از ايران انجام داده ايم و خوشحال مي شويم که اطلاعات و تجربيات خود را در اختيار ديگران و هموطنان عزيز قرار دهيم لطفا ما را در شبکه هاي اجتماعي دنبال کنيد تا از مطالب جديد ما اطلاع پيدا کنيد با تشکر و احترام







لطفا نظر خود را بنویسید

لطفا نظر خود را بنویسید

0

نظرات کاربران

  • نظری وجود ندارد


نظرات مشتریان در مورد ما

سیامک حجت مدیر شرکت خودرو سازان جنوب: ما سه سال پیش کار طراحی وب سایت را به شرکت طراحی سایت ساین وب واگذار کردیم و از طراحی وب سایت و پشتیبانی آن پس از سه سال  کاملا راضی هستیم با آرزوی موفقیت بیشتر سیامک حجت

مهندس سپهری مدیر شرکت آلتون تاش: یکسال نیم از  آشنایی ما  با شرکت طراحی سایت ساین وب گذاشته است از آقای مهندس رجب پور مدیر عامل شرکت طراحی سایت ساین وب  از طراحی زیبا و زیبای سایت شرکت آلتون تاش کمال نهایت تشکر را دارم

خانم عالیخانی مدیر شرکت عسل عالیخانی: من خودم در آمریکا زندگی می کنم با شرکت طراحی سایت ساین وب در شبکه های اجتماعی آشنا شدم. وقتی سایت طراحی شده خودمان را که صفر تا صد را مهندسین ساین وب انجام دادند حیرت زده شدم. کار جالب و سایت جالب و خوبی مربوط به عسل را برای ما طراحی کردند با تشکر

مهندس تنباکویی مدیر شرکت سپاهان جارو اصفهان: ما با شرکت طراحی سایت ساین وب در نمایشگاه آشنا شدیم,  شرکت ما در اصفهان شهر خوراسگان هست مهندسین ساین وب برای عقد قرار داد با ما به اصفهان آمدند و این برای ما جای تقدیر دارد. و از طراحی وب سایت خود که مطابق همان ایده و طرح اولیه سایت خودمان بود راضی هستیم

لطفا مارا در گوگل محبوب کنید