JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="hh"><p>Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
<a href="#" title="hover craft is here"
class="wt">Come ineside</a> Browsers will automatically display a tooltip
when you provide a title attribute. Internet Explorer will also use the
alt attribute. <a href="#" title="TYPICAL PIECE OF shit and that bitch really works" class="wt">piece of shit</a> in
this tutorial I’m going to show you how to quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to 
<div class="mids"> MIDS</div>
<span class-"mid_h"> COLOR </span>
quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in...

CSS

* {padding:0; margin:0;}
body {font-family:Arial;font-size:12px;}

.wt {
    position:relative;
}

a {
text-decoration:none;	
	}

.up_1 {
z-index:99;
font-family:"Trebuchet MS";
left:50%;
word-wrap: break-word!Important;
box-shadow:0 1px 8px #999999;
padding: 5px 8px;
background: #ffffff;
text-align:center;	
position:absolute;
top:10px;
min-width:100px;
max-width:150px;
color:#666666;
border-radius:3px;
border:1px solid #cfcfcf;
}

.up_3 {
z-index:110;
width:11px;
left:50%;
margin-left:-5px;
top:-9px;
height:9px;
position:absolute;
background:url('images/3c.png') center;
}	

.mid_h {
display:table;
	
	}	

p {
line-height:150%;	
	}
	2nd
	
.sed {position:relative;}

.hh {width:960px;margin:0 auto;  }

JavaScript

$('[title]').attr('title', function(i, title) {
    $(this).data('title', title).removeAttr('title');
});
    //to simplify the div block

    //custom tooltips
    $("a.wt").hover(function () {
		var cdiv = "<div class='up_1'>" + $(this).data('title') + "</div>" ;
        $(this).append(cdiv);
		var ds = $(".up_1").outerWidth()/2;
        $(this).find(".up_1").css({ "marginLeft" : -ds }).animate({ top : 30 ,opacity: 1 }, 200);
       },

    function () {
        
    });