jquery - How to display correct value on toolitp? -
i have following code assign value toolip, seem work somewhat. problem having when mouse on home shows last mousedover "music" instead of current mouseover.
how can show correct text on mouse over
js
$(document).ready(function() { $(".nav#menu span ").mouseover(function() { var val = $(this).html(); console.log("spanval "+val) $(".nav#menu li a").attr('data-original-title',val); $('[data-toggle="tooltip"]').tooltip(); }) }); 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>
the problem seems declaring id in html using id="#menu" instead of id="menu" (without #)
but here how anyway:
$(document).ready(function() { $("#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(); }); });