如何在工具提示上显示正确的值?

时间:2015-04-09 19:08:24

标签: jquery

我有以下代码为toolip赋值,这似乎有些作用。我遇到的唯一问题是,当我将鼠标移到主页时,它会显示最后的mousedover" 音乐"而不是当前的鼠标悬停。

如何在鼠标上显示正确的文字

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>

2 个答案:

答案 0 :(得分:1)

问题似乎是您使用id="#menu"代替id="menu"(没有#

在html中声明了您的ID

但无论如何我会这样做:

 $(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(); 
    });

});

<强> Here is a working example

答案 1 :(得分:0)

试试这个:

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