JSFiddle - React, Tailwind, and code Playground

by Aakash Chakravarthy

HTML

<p>Lorem <a href="#" class="ltip" title="Some tooltip">ipsum</a> dolor sit amet, consectetur adipiscing elit. Vivamus nulla neque, pharetra in venenatis eu, lobortis in libero. Integer dui erat, vehicula vel bibendum vitae, euismod posuere sapien. Morbi sit amet risus quam, quis ullamcorper eros. Morbi vitae lacus sapien, quis elementum nisl. Donec tempor vulputate orci, sed ultricies sapien malesuada id. Sed neque tortor, accumsan eget auctor at, mattis vitae magna. Sed mollis vehicula pulvinar. Etiam consequat urna imperdiet tellus euismod ut blandit velit ultrices. Nulla auctor <a href="#" class="ltip" title="Some tooltip 2">semper</a> mattis. Nullam lectus quam, commodo <a href="#" class="ltip" title="Some tooltip 3">eu bibendum eu, suscipit </a>eu metus. <a href="#" class="ltip" title="Some tooltip 2">Aenean eu urna in purus gravida gravida nec in arcu. Nam elementum viverra risus ac rutrum.</a> Aliquam hendrerit nisl in sem bibendum nec auctor libero dignissim.</p>

CSS

.awtip {
    background: #333333;
    border: 2px solid #666666;
    padding: 4px;
    color: #FFFFFF;
}
.jj {
    background: #FFCC00;
    height: 100px;
    width: 250px;
}

JavaScript

/* 
 * jQuery - liteTooltip - Plugin v1.0
 * http://www.aakashweb.com/
 * Copyright 2010, Aakash Chakravarthy
 * Released under the MIT License.
 */

(function($){
    $.fn.liteTooltip = function(options) {

        var defaults = {
            content: 'title',
            showEvent: 'mouseover',
            hideEvent: 'mouseout'
        };
    
        var options = $.extend(defaults, options);
        
        var tempTitle = $(this).attr('title');
        
        function showTip(ele){
            hideTip(ele);
            ele.attr('title', '');
            ltipHtml = $('<div class="litettip"></div>').fadeIn('fast')
                .css({ position: 'absolute' })
                .addClass(options.class)
                .html(options.content);
                
            ele.after(ltipHtml);
        }
        
        function hideTip(ele){
            ele.attr('title', tempTitle);
            ele.next('.litettip').fadeOut(300, function(){
                $(this).remove();
            });
        }
        
        function moveTip(e, ele){
            var tooltipWidth = ele.next('.litettip').outerWidth();
            var tooltipHeight = ele.next('.litettip').outerHeight();
            
            var elemPos = ele.offset();
            var elemWidth = ele.outerWidth();
            var elemHeight = ele.outerHeight();
            
            var posX = elemPos.left - (tooltipWidth / 2) + (elemWidth / 2);
            var posY = elemPos.top + elemHeight;
            
            ele.next('.litettip').css({ left: posX,  top: posY });
        }
        
        return this.each(function(){
                                  
            /*$(window).click(function(){
                hideTip($(this));
            });*/
            
            $(this).bind(options.showEvent, function(e){
                showTip($(this));
            });
            
            $(this).bind(options.hideEvent, function(){
                hideTip($(this));
            });
           ...