Jquery Tooltip đẹp và đơn giản cho trang web

reset and begin

8/01/2013

Tooltip tuy nhỏ nhưng cũng góp phần làm đẹp trang web của bạn , với tooltip tipsy dễ dùng

1 load thư viện jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

2 load style csss

<style>
   .tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
</style>

thay bằng ảnh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnjZRg5WMKe2DNOxMKPq_DoY3CFFU2sgVt5xSkITVxp3m-FKHLa_DALfDCdrH6-pb1lFaXv1bsNOGHUDidkwLacvQBOFHkIquD3mTKE-rLm7lB1i1r8nwQGEKmTNLRnixm1bgmI4Mghl-/s1600/tipsy.gif

3 load file jquery tooltip

<script src='https://webvn20.googlecode.com/files/tooltip.js' type='text/javascript'></script>

4 sử dụng

<script type='text/javascript'>
$(function() {
    $('#north').tipsy({gravity: 'n'});
    $('.south').tipsy({gravity: 's'});    $('#east').tipsy({gravity: 'e'});
    $('#west').tipsy({gravity: 'w'});
    $('#north-west').tipsy({gravity: 'nw'});
    $('#north-east').tipsy({gravity: 'ne'});
    $('#south-west').tipsy({gravity: 'sw'});
    $('#south-east').tipsy({gravity: 'se'});
});
</script>

vd : sử dụng cho class south

<a class='south' href='#' title='noi dung tooltip'>South</a>

5 tùy chọn

$.fn.tipsy.defaults = {
    delayIn: 0,      // delay before showing tooltip (ms)
    delayOut: 0,     // delay before hiding tooltip (ms)
    fade: false,     // fade tooltips in/out?
    fallback: '',    // fallback text to use when no tooltip text
    gravity: 'n',    // gravity
    html: false,     // is tooltip content HTML?
    live: false,     // use live event support?
    offset: 0,       // pixel offset of tooltip from element
    opacity: 0.8,    // opacity of tooltip
    title: 'title',  // attribute/callback containing tooltip text
    trigger: 'hover' // how tooltip is triggered - hover | focus | manual
};

nguồn http://onehackoranother.com/projects/jquery/tipsy/#download