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

Tooltip là một chú thích xuất hiện khi rê chuột lên 1 đối tượng nào đó như văn bản, hình ảnh, liên kết và các phần tử giao diện khác. ... Mục đích của tooltip là nói cho người dùng biết đối tượng này dùng để làm gì hoặc hiển thị thêm thông tin của đối tượng được rê chuột vào.

Hôm nay, mình sẽ chia sẻ với các bạn thủ thuật làm sao áp dụng tooltip vào bài viết của bạn. Tooltip này sẽ hiển thị tốt cả trên máy tính và  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). Chúc bạn thực hiện thành công

Tính năng và cách thực hiện

• Tự động thay đổi kích thước tooltip cho phù hợp với màn hình thiết bị
• Hoạt động tốt trên các thiết bị có màn hình cảm ứng
• Có thể sử dụng các thẻ HTML cho nội dung trong tooltip như kiểu chữ nghiêng, đậm
• 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.
•  Các bạn chèn đoạn code bên dưới vào trước thẻ đóng </head>
• Nếu template của bạn có <script src="http://code.jquery.com/jquery.js"></script> rồi thì không cần chèn vào nữa nhé.

<script src="http://code.jquery.com/jquery.js"></script>

<style>

#tooltip {border-radius:10px; text-align: center; color: #fff; background:rgba(0,0,0,.80); 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; }

  </style>

<script>

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

</script>

Cách sử dụng với thẻ HTML

1. Kiểu bình thường

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

• Kết quả 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>

• Kết quả 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>

• Kết quả sẽ được Tooltip

4 Kiểu dành cho link

<a href="http://trucblogs.blogspot.com/" rel="tooltip" title="Trực Blog ">DEMO</a>

• Kết quả sẽ được DEMO

Osvaldas Blog