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/8/8b/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;
}

JavaScript

$(document).tooltip({
     track: true,
     items: "img, [title]",
     position: {
         my: "center bottom-20",
         at: "center top"
     },
     content: function() {
         var element = $( this );
         
         if ( element.is( "[title]" ) ) {
             return element.attr( "title" );
         }
         if ( element.is( "img" ) ) {
             return element.attr( "alt" );
         }
     }
});