JSFiddle - React, Tailwind, and code Playground

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="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{{ url_for('index') }}">tryt</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li id="home-url"><a href="{{ url_for('index') }}">Home</a></li>
            <li id="about-url"><a href="#about">About</a></li>
            <li id="contact-url"><a href="#contact">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-right" method="get" action="{{ url_for('quick_search')}}" role="form">
                <div class="form-group">              
                    <input class="form-control" type="text"  name="quick_search" id="quick_search" placeholder="Search" type="submit"> 
                    <span class="glyphicon glyphicon-info-sign">
                            <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Tooltip here <BR> Hello"> 
                            </a>
                    </span>
                    </input>                    
                </div>
            </form>
          </ul>          
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <div class="container">

CSS

a.my-tool-tip, a.my-tool-tip:hover, a.my-tool-tip:visited {

    color: black;
}

JavaScript

$("a.my-tool-tip").tooltip();