JSFiddle - React, Tailwind, and code Playground

by sayedtaqui

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery Dropdown Menus</title>
        <link rel="stylesheet" type="text/css" href="includes/tooltip.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="includes/tooltip.js"></script>
        
    </head>
    
    
    
    
    <body>
        <div class="page">
            <header>
                <a class="logo tooltip" data-tip-type="html" data-tip-source="tooltip-sidebar3" href="#">Logo</a>
            </header>
            <article>
                
                <aside>
                    
                    <a class="tooltip" data-tip-type="html" data-tip-source="tooltip-sidebar" href="#">HTML-based tooltip</a>
                </aside>
                <a class="tooltip" data-tip-type="html" data-tip-source="tooltip-sidebar2" href="#">text-based tooltip</a> 
                
                <div class="clear-all"></div>
            </article>
            
            <div id="tooltip_container"></div>
            
            <div class="tooltip-source-html">
                
                
                <div id="tooltip-sidebar">
                   Sayed
                    <div id="position:relative;">
        <div class="arrow-down" style="left:12px;"></div>
         </div>
        
                      
                    
        
       
                    
                    
             </div>
                     <div id="tooltip-sidebar2">
                   Hemant
                    <div id="position:relative;">
        <div class="arrow-down" style="left:12px;"></div>
         </div>
                        
            </div>
                     <div id="tooltip-sidebar3">
                   Trash
                    <div id="position:relative;">
        <div class="arrow-down" style="left:12px;"></div>
        ...

CSS

/*  CSS Document                             */


/* Style */
body { font: 12px Arial; margin: 0px; padding: 0px 20px; background-color: #03658b; }
h1 { margin: 0 0 1em 0; color: #03658a; font-size: 1.7em; font-weight: normal; }
h2 { margin: 0 0 .5em 0; color: #03658a; font-size: 1.3em; }
p { margin: 0 0 1em 0; line-height: 1.5em; }
a { color: #00a8ff; text-decoration: none; }
aside p { color: #777; }
footer { font-size: .9em; }

/* Layout */
.page { max-width: 980px; #width: 980px; margin: 0px auto; padding: 0px; }
header { position: relative; height: 28px; margin: 0px; padding-top: 60px; background: url(../images/banner.jpg) no-repeat 50% 0px; }
header a.logo { width: 120px; height: 50px; position: absolute; top: 15px; left: 15px; background: url(../images/logo.png) no-repeat 0px 0px; display: block; }
nav { background-color: rgba(0,0,0,.4); }
article { margin: 0px; padding: 25px; background-color: #fff; }
aside { width: 200px; float: right; margin: 0px 0px 10px 40px; padding: 0px 0px 0px 20px; border-left: 2px solid #ccc; }
aside p { margin: 0px; }
footer { border-top: 1px solid #ddd; margin: 0px; padding: 10px 25px 10px 10px; color: #72abb6; }
.clear { clear: both; line-height: 1px; }


/* Tooltip */

#tooltip_container {
    color: #fff;
    position: absolute;
    display: none;
    padding: 5px 7px;
    max-width: 200px; 
    background-color: rgba(0,0,0,.85);
    border-radius:3px;
   
    
}

.tooltip-source-html { display: none; }


div.arrow-down {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid black;
  font-size:0px;
  line-height:0px;
    position:absolute;
    opacity:.85;
    left:45px;
    top:25px;
    
}

JavaScript

/*  JavaScript Document                      */


$(document).ready(function() {

    // Tooltip
    $('.tooltip').mouseover(function(e) {
        
        // data type - text
        if ( $(this).attr('data-tip-type') == 'text' ){
            $('#tooltip_container').html( $(this).attr('data-tip-source') );
        }
        
        // data type - html
        if ( $(this).attr('data-tip-type') == 'html' ){
            var elementToGet = '#' + $(this).attr('data-tip-source');
            var newHTML = $(elementToGet).html();
            $('#tooltip_container').html( newHTML );
        }
        $('#tooltip_container').css({'display':'block','opacity':0}).animate({opacity:1},250);
    }).mousemove(function(e) {
        var tooltipWidth = $('#tooltip_container').outerWidth();
        var tooltipHeight = $('#tooltip_container').outerHeight();

        // width detection
        var pageWidth = $('body').width();
        if ( e.pageX > pageWidth / 2 ){
            $('#tooltip_container').css('left',( e.pageX - tooltipWidth + 20 ) + 'px');
        }else{
            $('#tooltip_container').css('left',( e.pageX - 20 ) + 'px');
        }
        
        // height detection
        if ( e.pageY > 100 ){
            $('#tooltip_container').css('top',( e.pageY - (tooltipHeight+20) ) + 'px' );
        }else{
            $('#tooltip_container').css('top',( e.pageY + 20 ) + 'px' );
        }
        
        /* debug */ $('.bodywidth').html( pageWidth );
        /* debug */ $('.xpos').html(e.pageX);
        /* debug */ $('.ypos').html(e.pageY);
    
    }).mouseout(function() {
        $('#tooltip_container').animate({opacity:0},250, function(){
            $('#tooltip_container').css('display','none')
        });
    });
    
});