Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQuery Example</title>
  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  
  <script>
    (function($)
    {
        $.tippedOff = function(selector, settings)
        {
            var config = {
                'top':0,
                'left':0,
                'wait':3000
            };
            if(settings){$.extend(config, settings);}
    
            var $elem = $(selector);
            if($elem.length > 0)
            {
                $elem.each(function()
                {
                  //bind mouseenter, mouseleave, click event
                    $(this).css({"color":"#F00"})
                    .mouseenter(function(){
                      $(this).css({"color":"green"});
                    })
                    .mouseleave(function(){
                      $(this).css({"color":"#F00"});
                    })
                    .click(function(){
                      $(this).html('clicked');
                    });
                    
                })
            }
    
            return this;
        };
​
        $.fn.tippedOff2 = function(settings) {
          var config = $.extend( {
              'top':0,
              'left':0,
              'wait':3000,
              'color': 'orange',
              'hoverColor': 'blue'
          }, settings);
          
          return this.each(function() {
              $this = $(this);
              $this.css({ 'color': config.color})
              .mouseenter(function(){
                 $this.css({ 'color': config.hoverColor });
              })
              .mouseleave(function(){
                 $this.css({ 'color': config.color });
              })
              .click(function(){
                 $this.html('clicked');
              });
            
          });
        }
    })(jQuery);
​
​
    $(document).ready(function(){
      $.tippedOff($('#test'));
      $('#test2').tippedOff2();
      
    });
  </script>
</head>
<body>
  <span id="test">Test1</span>
  <span id="test2">Test2</span>
  
</body>
</html>
​
 
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dirtyd77pro
0viewers