Twitter Bootstrap：html 地图区域的工具提示

Posted 2023-02-14

【中文标题】Twitter Bootstrap：html 地图区域的工具提示

【英文标题】：Twitter Bootstrap: tooltips on html map area

【发布时间】：2012-07-25 20:52:44

【问题描述】：

来自 twiiter bootstrap 的工具提示很棒，但它们不适用于 标签:( 我该如何解决？

我注意到js可以工作，创建了tooltip元素，但是它的位置是错误的..

我做了一个小例子。 http://jsfiddle.net/dhkFN/1/

【参考方案1】：

我喜欢 Twitter 引导程序，但一些 js 插件在当前形式下有点简单。

结帐 qTip 2 - http://qtip2.com/

包括图像地图在内的所有内容 - http://qtip2.com/demos/#imagemaps

您可以将输出类调整为引导类。

【讨论】：

很酷的插件，感谢您的提醒。这是 imagemaps 功能的更新链接（现在看来是一个附加组件）：qtip2.com/plugins#imagemap

【参考方案2】：

我最近不得不用 Bootstrap 做一些类似的事情，并试图让工具提示与图像地图区域一起工作，但放弃了。

我选择了 ImageMaster，它是一个用于制作图像地图的 jQuery 插件，并且具有工具提示等选项

http://www.outsharked.com/imagemapster/

https://github.com/jamietre/ImageMapster

ImageMapster 在 Bootstrap 的 CSS 方面确实存在一些问题，但作者好心地为我解决了这个问题，所以它应该很好用！

【讨论】：

感谢您的回复。看起来我应该获得另一个工具提示库或自己创建精美的工具提示（这并不难:)）

【参考方案3】：

经过一天的搜索和思考如何解决项目的工具提示（使用区域的地图图像），我发现这个 http://www.xing.net.au/blogs/displaying-page-in-jquery-tooltip 在自定义要显示的内容时比 JSFiddle 更灵活。

JSFiddle 中的示例依赖于区域的 ALT 属性，而 Jtip 可以通过其他页面进行自定义。

一切顺利！