JSFiddle - React, Tailwind, and code Playground

by ptomblin

HTML

<h2>Tooltip Example - CSS 3 using a span</h2>
<p>This link that use a span instead of the "title" attribute to produce a tooltip.</p>
<p>http://www.lets-develop.com/html5-html-css-css3-php-wordpress-jquery-javascript-photoshop-illustrator-flash-tutorial/css-css3-css-3-style-styling/style-tooltip-css-how-to-style-the-title-attribute-with-css/</p>
<a class="tooltip" href="#">This is a link with a css3 tooltip box.
<span>
<b></b><!--the small arrow on top-->
This content is shown inside the tooltip box on mouse over.
</span>
</a>
We are using CSS3 to style this tooltip.
</p>

<select name="selection">
    <option value="first" class="tooltip">First<span><b></b>first tooltip</span></option>
    <option value="second" class="tooltip">Second<span><b></b>second tooltip</span></option>
    <option value="third" class="tooltip">Third<span><b></b>third tooltip</span></option>
    <option value="fourth" class="tooltip">Fourth<span><b></b>foourth tooltip</span></option>
</select>

CSS

.tooltip span{
z-index: 10;
display: none;
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.tooltip:hover span{
display: inline;
position: absolute;
border: 1px solid #8c8c8c;
background: #f4f4f4;
}
.tooltip > span{
width: 200px;
padding: 10px 12px;
opacity: 0;
visibility: hidden;
z-index: 10;
position: absolute;
font-size: 12px;
font-style: normal;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 4px 4px 4px #d9b3c3;
-moz-box-shadow: 4px 4px 4px #d9b3c3;
box-shadow: 4px 4px 4px #d9b3c3;
}
.tooltip:hover > span{
opacity: 1;
text-decoration:none;
visibility: visible;
overflow: visible;
margin-top: 40px;
display: inline;
margin-left: -200px;
}
.tooltip span b{
width: 15px;
height: 15px;
margin-left: 20px;
margin-top: -19px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset -1px 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
display: none\0/; *display: none;
background: #f4f4f4;
border-top: 1px solid #8c8c8c;
border-right: 1px solid #8c8c8c;
}
.tooltip > span{
color: #000000;
background: #f4f4f4;
background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 );
border: 1px solid #8c8c8c;
}