javascript - 鼠标悬停时的文本工具提示

Question

我有一组项目符号，当我分别将鼠标悬停在每个项目符号上时，我想创建一个工具提示。 tooltip文本可以是bullets title标签，需要输出到tooltip容器中。 javascript 新手，所以这是我需要帮助的地方。

这是我的 CSS:

.container ul { width: 300px; height: 30px; display: block; background: #CCC;  }
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; }
.tooltip { width: auto: height: 12px; display: block; }

我的 HTML:

<div id="tooltip" class="tooltip"></div>
<div class="container">
    <ul>
        <li class="book" title="book"></li>
        <li class="movie" title="movie"></li>
        <li class="tv" title="tv"></li>
    </ul>
</div>

还有我的javascript:

<script>
$(document).ready(function(){
    $("ul li").mouseover(function() {
         $("#tooltip").text($(this).attr("title"));
    });
});
</script>

Answer 1

改变自

$("#tooltip").text("this.val(alt)")

到

$("#tooltip").text($(this).attr('alt'));