تولتیپ در چند مدل مختلف

تولتیپ جی کوئری با افکت های جذاب

آموزش استفاده

1. کدهای جی کوئری

   <script type="text/javascript" src="all.js"></script>
   <script type="text/javascript">
       $('.hover:eq(0) span').tooltipsy();
       $('.hover:eq(1) span').tooltipsy({
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
       $('.hover:eq(2) span').tooltipsy({
           offset: [0, 10],
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
       $(window).trigger('scroll');
       $('.hover:eq(3) span').tooltipsy({
           offset: [10, 0],
           css: {
               'padding': '10px',
               'max-width': '100px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
       $('.hover:eq(4) span').tooltipsy({
           offset: [-10, 0],
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
       $('.hover:eq(5) span').tooltipsy({
           offset: [-10, 0],
           show: function (e, $el) {
               $el.css({
                   'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
                   'opacity': '0.0',
                   'display': 'block'
               }).animate({
                   'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
                   'opacity': '1.0'
               }, 300);
           },
           hide: function (e, $el) {
               $el.slideUp(100);
           },
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
   
       $('.hover:eq(6) span').tooltipsy({
           offset: [0, -1],
           show: function (e, $el) {
               var cur_top = parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 'px'; 
               $el.css({
                   'top': (window.pageYOffset - $el.outerHeight()) + 'px',
                   'display': 'block'
               }).animate({
                   'top': cur_top,
                   'opacity': '1.0'
               }, 500, 'easeOutBounce').css('top', cur_top);
           },
           hide: function (e, $el) {
               $el.animate({
                   'top': '+=200px',
                   'opacity': '0.0'
               }, 200);
           },
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
   
       $('.hover:eq(7) span').tooltipsy({
           alignTo: 'cursor',
           offset: [10, 10],
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
   
       $('.hover:eq(8) span').tooltipsy({
           content: function ($el, $tip) {
               $.get('api.php', function (data) {
                   $tip.html(data);
               });
               return 'متن آزمایشی';
           },
           css: {
               'padding': '10px',
               'max-width': '200px',
               'color': '#303030',
               'background-color': '#f5f5b5',
               'border': '1px solid #deca7e',
               '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
               'text-shadow': 'none'
           }
       });
   </script>