Snippets-logo-small
  • TYPO3 Typoscript
  • TYPO3 TSConfig
  • TYPO3 Install Tool
  • TYPO3 allg
  • Git
  • Javascript - JQuery
  • Unix
  • css
  • regular expressions
  • php
  • SQL
  • Ruby on Rails
  • tooltip
  • google api

tooltip

  • plugin js 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    
    // include this after the jquery lib
    ;(function($) {
    $.fn.tooltip = function(options) {
      var opts = $.extend({}, $.fn.tooltip.defaults, options);
      
      // add hover div 
      if ($('#tooltip').length == 0) {
         $('body').prepend('<div id="tooltip"></div>') 
      }
      var $tooltip = $('#tooltip') 
      
      return this.each(function() {
        var $this = $(this);
    
        // get title
        var title = $this.attr('title')
        
        if(title != undefined && title != '') {
          $this.mousemove(function(e) {
            // remove title
            $this.removeAttr('title')
            
            $tooltip.html(title)
            if(opts.position=='bottom left'){
                    var top = e.clientY +10
                    var left = e.clientX -  $tooltip.width()-20;
            } else { //'bottom right'
                    var top = e.clientY 
                    var left = e.clientX + 20
            }
            $tooltip
                    .css('top', top)
                    .css('left',left)
    
            if (opts.fadeIn) {
              $tooltip.stop().fadeTo(opts.fadeInSpeed,1)
            } else {
              $tooltip.show()
            }
             
          }).mouseout(function() {
            if (opts.fadeOut) {
              $tooltip.stop().fadeTo(opts.fadeOutSpeed,0,function(){$tooltip.hide()})
            } else {
              $tooltip.hide()
            }
            // add title again
            $this.attr('title',title)
          });
        }
        
      });
      
    };
    
    // default options
    $.fn.tooltip.defaults = {
      position:'bottom right',
      fadeIn:false,
      fadeOut:false,
      fadeInSpeed:200,
      fadeOutSpeed:200,
    };
    
    })(jQuery);
    by stefan
  • css 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    #tooltip {
       padding:5px;
       background-color: #4B7399;
       border: 1px solid #4B7399;
       -webkit-border-radius: 3px;
       -webkit-box-shadow: #324F72 5px 5px 5px;
       -moz-border-radius: 3px;
       -moz-box-shadow: #324F72 5px 5px 5px;
       color: #fff;
       z-index: 999;
       position: absolute;
       display: none;
    } 
    by stefan
  • page js 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    // call the plugin inside dom ready event like this with default options
    $(function() {
      $('a').tooltip()
    });     
    
    // or with custom options
    $(function() {
      $('.tooltip_owner').tooltip({
        "position":"bottom left",
        fadeIn:true,
        fadeOut:true,
        fadeInSpeed: 300,
        fadeOutSpeed: 100,
      })
    });     
    by stefan
This site is made by tan3