工具提示作为工具栏：jQuery、CSS或其他？

Question

我想使用工具提示作为工具栏，并希望有关如何实现的建议。

以下是我的要求：

- 使用CSS或jQuery（或两者兼备）实现 - 鼠标悬停一两秒后显示工具提示 - 工具提示包含进一步的UI按钮 - 在mouseout事件中，工具提示保持可见1秒钟 - 工具提示在触发元素和工具提示本身的mouseover事件中仍然可见 - 工具提示可以包含HTML

这是我想做的一个示例：

- Josh Smith

---

只是一个小建议，也要考虑到越来越多的触摸设备，对于这些设备，悬停不会触发。也许单击/触摸可以触发工具栏？ - mkoistinen

我同意随着触摸平台的进步，我会通过创建一些浏览器/平台指定来创建两种情况（如果适用于您的受众和预算）。 - taylorjes

@mkoistinen，感谢你的提示！顺便问一下，你知道iPad（即移动版Safari）是否仍然无法很好地与contentEditable兼容吗？ - Josh Smith

看看这位设计师的比赛，可以获得一些不错的想法: http://css-tricks.com/ui-pattern-ideas-list-with-functions/ - AutoSponge

Answer 1

是的，taylorjes是正确的。工具提示信息/下载需要注意的是您可以在此工具提示中包含HTML。这意味着您可以包含带有单击事件的按钮等内容。我相信您能够根据自己的要求进行调整。

工具提示图像可以自定义，或者使用他们其中之一，它们非常好看。

以下是我的示例：

在javascript中：

$("#toolTipBusinessInfo img[title]").tooltip({ effect: 'slide' });

在HTML中：

<div id="toolTipBusinessInfo" class="pageTitleContainer">
                            <div style="float: left">
                                Business Information</div>
                            <img style="float: left" src="images/question-mark.jpg" alt="?" width="25px" height="25px"
                                title="<p><b>Business Information</b></p>The legal name of the business refers to the name that is reflected on the business license and the name that is used for legal purposes. Legal address reflects the legal address that is used for legal purposes also." />
                        </div>

看起来像这样：

- Induster

---

我假设CSS是相当容易定制的，对吗？我一看到它的外观就感到不舒服。 - Josh Smith

非常容易进行样式设计，同时具有可自定义的效果。与每个jQuery Tools脚本一样，它也很轻巧：对于特定的效果，未经压缩的大小为7.5kB（如果包括您永远不会使用的所有插件和效果，则最大为45kB）。仅使用2或3个插件，它的大小为10-15kB。 - FelipeAls

Answer 2

我从未编写过自己的代码，但我以前使用过来自flowplayer.org的这个。有很多设置和配置。

- taylorjes

Answer 3

请查看Prototip，尤其是演示中的hideafter模式，它可以满足您的要求。

还有很多其他选择，请在这里查找。

- Vinay B R

Answer 4

请查看qTip。

- MJC

Answer 5

你有一些非常酷的非主流选项，想要探索以便更多地了解。

考虑到可访问性和SEO，让我们开始：使用纯HTML制作工具提示，并使用CSS / Javascript根据您的要求在需要时显示它们。

如果你想要一些新的、酷的和新鲜的功能，你可以使用CSS3过渡效果来在鼠标悬停/移出时显示/隐藏。它在Safari和其他新浏览器（包括Safari移动版、Opera移动版）上表现良好。

但是，即使对于FF 3.x，这种CSS3解决方案也不起作用，不幸的是。

这让我们需要一些javascript/jquery编码。

实际上，你的请求让我想起了另一个非常酷的东西：超级下拉菜单。

我最初是在Jakob Nielsen的Alert Box上读到它们的：http://www.useit.com/alertbox/mega-dropdown-menus.html

你可以在sitepoint.com上找到关于它们的如何做：http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

好的，事情是使用原始的HTML和CSS3创建一个轻量级的可访问选项，然后使用javascript/jquery进行增强。你可以进一步进行调整，以便在Safari/Android移动设备上实现可访问性（嗯，Safari只需要CSS3解决方案就可以工作，所以它更多地取决于你的需求而不是技术基础设施的可用性）。

- Davis Peixoto

Answer 6

我不知道这是否能帮到你，但是可以看看这个jQuery插件。它允许你创建具有工具提示样式的工具栏：

Toolbar.js - 一个用于创建响应式工具提示样式工具栏的jQuery插件

希望能对你有所帮助！

- Hirvesh

Answer 7

建议：

使用以下jQuery插件之一：

• qTip（见上文）
• clueTip：http://plugins.learningjquery.com/cluetip/
• jQueryTools：http://flowplayer.org/tools/index.html

（基本上选择你想要的插件） 以上任何一个都应该能够处理您的要求，但请比较功能集以确定哪个最适合您当前和可能的未来需求。

如果触摸设备是一个问题，要么（a）使用onclick而不是onmouseover，并提供一些视觉呼吁，要么（b）处理浏览器检测并为触摸设备创建替代行为。

像往常一样，使用CSS进行所有样式和图像需求。在JavaScript中定义类来触发外观和感觉，但请不要注入内联样式。

- nopuck4you