Question

我有一套子弹，当我将它们分别鼠标悬停在每个子弹上时，我想创建一个工具提示。工具提示文本可以是项目符号标题标记，需要输出到工具提示容器中。新手到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

这并没有直接回答你的问题，但是这个功能已经存在一些方便的jQuery插件。我喜欢这个：http://craigsworks.com/projects/qtip/a

其他一些人：http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 2

从

改变

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

到

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

Answer 3

我建议使用jQuery UI功能工具提示。

工具提示文本通常取自您使用此功能的元素的title属性 - 但您可以在其他位置获取它。

您可以设置工具提示的位置以及文本的位置。

$('textarea').tooltip({
        position: {
            my: 'left center',
            at: 'right center'
        }
    });

但是您可以在代码中的任何位置获取工具提示的文本。

$('select').tooltip({
position: {
        my: 'right center',
        at: 'left center'
    },
    content: function(){
        if($(this).find('option:selected').val() == 0 )
        {
            return '...';
        }
        else
        {
            return '...' + $(this).find('option:selected').val() + '...';
        }
    }
});

就像在这种情况下工具提示包含基于所选选项的文本 - 或任何其他文本。

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

3 个答案: