Tooltip đẹp và hiển thị tốt trên mobile

Trước đây mình có giới thiệu vài bài viết về tooltip và các bạn có thể xem tại đây. Tuy nhiên ở bài viết này có khác đôi chút là tooltip này sẽ hiển thị tốt trên mobile và tự thay đổi kích thước sao cho phù hợp với trình duyệt hiện tại trên thiết bị (responsive). Để demo cho thủ thuật này các bạn rê chuột vào tooltip là gì để hiểu rõ hơn.

Tính năng

1. Tự động thay đổi kích thước tooltip cho phù hợp với màn hình thiết bị
2. Hoạt động tốt trên các thiết bị có màn hình cảm ứng
3. Có thể sử dụng các thẻ HTML cho nội dung trong tooltip như kiểu chữ nghiêng, đậm

CSS

Chúng ta sẽ thiết kế cho khung tooltip bằng đoạn CSS bên dưới, nếu hiểu rõ bạn có thể tùy biến sao cho phù hợp với blog/website của mình

#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;
        }

Javascript

$( 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 );
    });
});

HTML

Để hiển thị được tooltip các bạn phải viết theo cấu trúc HTML sau
1. Kiểu bình thường

<abbr title="Nội dung title" rel="tooltip">Tooltip</abbr>

Ta sẽ được Tooltip

2. Kiểu có nội dung chữ in nghiêng

<abbr rel="tooltip" title="Nội dung title này có sử dụng chữ <em>in nghiêng</em>.">Tooltip</abbr>

Ta sẽ được Tooltip

3. Kiểu có nội dung chữ in đậm

<abbr rel="tooltip" title="Nội dung title này có sử dụng chữ <strong>in đậm</strong>.">Tooltip</abbr>

Ta sẽ được Tooltip

4 Kiểu dành cho link

<a href="http://www.gamevl.pro" rel="tooltip" title="Đây là trang chuyên chia sẻ game và ứng dụng hay cho mobile">Gamevl.Pro</a>

Ta sẽ được Gamevl.Pro

Đừng quên để lại nhận xét cho bài viết và chia sẻ đến bạn bè của mình nếu thấy bài viết thú vị nha! Cảm ơn!

Nguồn http://osvaldas.info