JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<a HREF='#' id='show-option' title='Un joli lien !'>LIEN</a>


<div class="ui-widget photo">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Tower_bridge_London_Twilight_-_November_2006.jpg/800px-Tower_bridge_London_Twilight_-_November_2006.jpg" alt="Tower Bridge" class="ui-corner-all photo"/>
</div>

CSS

.photo {
width: 100px;
height:80px;
text-align: center;
}
.photo .ui-widget-header {
margin: 1em 0;
}
/*.ui-tooltip {
max-width: 350px;
background: #9ac2da;
color:white;
color:#fff;
	padding:0 5px;
	border-radius:2px;
	background:rgba(0,0,0,.8);
	text-align:center;
white-space:nowrap;
}*/
.ui-tooltip img{
vertical-align: middle;}

.ui-tooltip {
    /*background: #666;*/
    background:rgba(0,0,0,.8);
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
    height:auto;
    min-height:20px; 
    font-size:10px;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    /*border-color: transparent #666;*/
    border-color: transparent rgba(0,0,0,.8);
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    /*border-color: transparent #666;*/
    border-color: transparent rgba(0,0,0,.8);
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    /*border-color: #666 transparent;*/
    border-color: rgba(0,0,0,.8) transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    /*border-color: #666 transparent;*/
    border-color: rgba(0,0,0,.8) transparent;
    border-width: 0 10px 10px;
}

JavaScript

$(document).tooltip({
     /*track: true,*/
     items: "img, [title]",
     tooltipClass: "bottom",
     position: {
         my: "center top",
         at: "center bottom+10"
     },
     content: function() {
         var element = $( this );
         
         if ( element.is( "[title]" ) ) {
             return  '<img src="http://image.noelshack.com/fichiers/2014/31/1406904000-info-icone-9185-16.png" /> '+element.attr( "title" );
         }
         if ( element.is( "img" ) ) {
             return '<img src="http://image.noelshack.com/fichiers/2014/31/1406904000-info-icone-9185-16.png" /> '+element.attr( "alt" );
         }
     }
});