JSFiddle - React, Tailwind, and code Playground

by denislexic

HTML

<div class="wrapper_to_copy">
    <div class="avatar" href="#" title="hello">
        <img src="avatar_3.jpg" />
        <ul>
            <li class="first"></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
        </ul>
    </div>
</div>
<br />
<br />
<br />

<a href="#" class="copy">Click me to duplicate</a>

CSS

body {margin:15px;font-family:Arial;font-size:13px}
        .avatar{ display: inline-block; background: #1b75bb; position:relative; cursor: pointer; }
        .avatar img{ width: 30px; height: 30px; padding: 3px; }
        .avatar ul{ display: none; list-style: none; position: absolute; margin: 0; padding: 4px 0;
             background: white; border: 1px solid #CACACA; }
        .avatar ul li { padding: 0; margin: 0; }
        .avatar ul li.first{ position: absolute; width: 7px; height: 9px; display: block; background: url("arrow.png"); left: -7px; top: 3px; }
        .avatar ul li a{ padding: 5px; margin: 2px; font-size: 16px; opacity: 1; color: #1b75BB; text-decoration: none;  }
        .avatar ul li a:hover{ color: #333; }

JavaScript

(function($){
    $.fn.tooltip = function(options) {
        
        var
          defaults = {
              background: '#e3e3e3',
            color: 'black',
            rounded: false
          },
          settings = $.extend({}, defaults, options);
          
          this.each(function() {
              var $this = $(this);
            var title = this.title;
            var menu = $this.children('ul');
            
                this.title = '';
    
    
                    
                    $this.live('click',function() { 
                        if(!menu.hasClass('open')){
                            var ele_width = $this.width();
                            var ele_height = $this.height();
                        
                            menu
                              .hide()
                              .css({
                                top: 5,
                                left: ele_width + 10
                              })
                            .addClass('open')
                              .fadeIn(350);
                          } else {
                            menu.removeClass('open').hide();
                        }
                    });    
                    

                    menu.mouseleave(function(){
                        if(menu.hasClass('open')){
                            menu.removeClass('open').hide();
                        }
                    });

          });
        

        
          // returns the jQuery object to allow for chainability.
          return this;
    }
})(jQuery);




        $(document).ready(function(){
            $('.avatar').tooltip();
            $('.copy').click(function(){
                var ele_content = $('.wrapper_to_copy').html();
                $('.wrapper_to_copy').prepend(ele_content);
                return false;
            });
        });