JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="" ng-Click="">
      <ul class="nav" id="menu">
        <li>
          <a class="toggle-button-on" data-toggle="tooltip" data-placement="right" data-original-title=""><i class="fa fa-exchange">toggle</i></a>
        </li>
        <li>
          <a ui-sref="Home" ng-class="" data-toggle="tooltip" data-placement="right" data-original-title="">
            <i class="fa fa-home fa-3x">fa </i>
            <span>Home</span>
          </a>
        </li>
        <li>
          <a ng-class="" data-toggle="tooltip" data-placement="right" data-original-title="">
            <i class="fa fa-bar-chart-o fa-3x">fa </i>
            <span>Work </span>
          </a>
        </li>
        <li>
          <a ui-sref="Music" ng-class="" data-toggle="tooltip" data-placement="right" data-original-title="">
            <i class="fa fa-table fa-3x">fa </i>
            <span>Scenario <br/>Music</span>
          </a>
        </li>
        <li>
          <a ui-sref="faq" data-toggle="tooltip" data-placement="right" data-original-title="">
            <i class="fa fa-faq fa-3x">fa </i> 
            <span>Faq</span> 
          </a>
        </li>
      </ul>
    </div>

CSS

#menu li a{
    width: 200px;
}

JavaScript

$("#menu span").on('mouseover', function() {
        var Val = $(this).html();
        console.log("spanVal " + Val);
        $(this).parent().attr('data-original-title',Val);
        $('a[data-toggle="tooltip"]').tooltip(); 
    });