JSFiddle - React, Tailwind, and code Playground

by vandigroup

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6 col-xs-12 portfolio-similar">
     <h3>Similar Products</h3>
     <a href="#"><img class="about-me-portfolio" src="images/about/01.jpg" data-toggle="tooltip" data-placement="top" title="Product 1"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/02.jpg" data-toggle="tooltip" data-placement="top" title="Product 2"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/03.jpg" data-toggle="tooltip" data-placement="top" title="Product 3"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/04.jpg" data-toggle="tooltip" data-placement="top" title="Product 4"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/05.jpg" data-toggle="tooltip" data-placement="right" title="Product 5"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/06.jpg" data-toggle="tooltip" data-placement="left" title="Product 6"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/07.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 7"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/08.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 8"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/03.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 9"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/05.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 10"></a>
</div>

JavaScript

$("[data-toggle='tooltip']").tooltip();