JSFiddle - React, Tailwind, and code Playground

by mridulpv

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="navbar  navbar-fixed-top" style="background-color:#012346 !important">
      <div class="container">
            <a href="#" class="btn btn-lg btn-link pull-right"><span style="color:white">Sign in/Register</span></a>           
            
      </div>
    </div>

<div class="container">
          <div class="col-sm-3">
            <div class="well bs-sidebar affix" id="sidebar">
              <ul class="nav nav-stacked col-lg-3">
                <li ><a id="id1" href="#">Link 1</a></li>
                <linav  ><a id="id2" href="#">Link 2</a></li>
                <li ><a id="id3" href="#">Link 2</a></li>
              </ul>
            </div>
          </div>
    <div class="show-content">
        <div class="col-md-9">
            Some text here
        </div>
    </div>

    
</div>

CSS

.tooltip-inner {
    max-width: 350px;
    min-width:350px;
    max-height: 100px;
    min-height:100px;
    
}

JavaScript

$('.nav nav-stacked col-lg-3').tooltip({
    'show': true,
        'placement': 'right',
        'title': "MY first div",
      'container':'show-content'
});
$('#id2').tooltip({
    'show': true,
        'placement': 'right',
        'title': "MY second div "
});
$('#id3').tooltip({
    'show': true,
        'placement': 'right',
        'title': "MY second div "
});