JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://code.google.com/p/phpwcms/source/browse/branches/dev-2.0/include/js/bootstrap-tooltip.js?r=481"></script>
<div class="hideMe">Click me</div>
<div id="tog"></div>
<div id="tip" data-toggle="tooltip" title="Your Message on tooltip">Hove me</div>

CSS

.hideMe{
    background:#dd0403;
    margin:10px;
    width:100px;
    height:30px;
}

#tip{
    margin: 10px;
    width:100px;
    height:30px;
    background: green;
    text-align:center;
    padding:5px;
}
#tog{
    margin: 10px;
    width:100px;
    height:30px;
    background: green;
    text-align:center;
    padding:5px;
}

JavaScript

$(function (){
    //$(".hideMe").hide();
    //$("#tip").tooltip('show');  /*.tip is the class of the 'a' anchors that i need as tooltips*/
    
    $(".hideMe").click(function(){
        $("#tog").toggle('slow');
    });
});