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

【问题标题】：Text tooltip on mouseover鼠标悬停时的文本工具提示
【发布时间】：2011-03-17 04:34:23
【问题描述】：

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

【问题讨论】：

我建议您使用插件而不是尝试自己做，特别是如果您是新手。下面列出了一些相当不错的。此外，如果您有 Dreamweaver，他们有一个名为 spry 工具提示的小部件，非常易于使用
@Luke：你对任何你见过运行良好的 jquery 插件有什么建议吗？

标签： javascript text tooltip mouseover

【解决方案1】：

改变

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

到

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

【讨论】：

谢谢达武。我扩展了你的建议（见原文），但仍然无济于事。也从“alt”属性移动到“title”。

【解决方案2】：

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

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

【讨论】：

谢谢我尝试安装它，但我认为它对于我正在寻找的东西来说太强大了。

【解决方案3】：

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

工具提示文本通常取自您使用此功能的元素的标题属性 - 但您可能会在其他地方获得它。

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

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

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

【讨论】：