JSFiddle - React, Tailwind, and code Playground

by Gourav Singh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="list">
  
<li><img href="#" src="http://emojipedia-us.s3.amazonaws.com/cache/27/6b/276b7f04d488f8e2555fc4b46c5746cf.png" data-toggle="tooltip" data-placement="right" animation="false" alt="Boom-shaka!" title="test"></li>

<li><img href="#" src="http://emojipedia-us.s3.amazonaws.com/cache/27/6b/276b7f04d488f8e2555fc4b46c5746cf.png" data-toggle="tooltip" data-placement="right" animation="false" alt="I like turtles"></li>

<li><img href="#" src="http://emojipedia-us.s3.amazonaws.com/cache/27/6b/276b7f04d488f8e2555fc4b46c5746cf.png" data-toggle="tooltip" data-placement="right" animation="false" alt="What?! Snake-eyes!?"></li>
  
</ul>

JavaScript

$('[data-toggle="tooltip"]').tooltip();   
 
$( ".list li img" ).each(function( index ) {
    $(this).attr('title', $(this).attr('alt'));
});