Twitter Bootstrap：在HTML地图区域上使用工具提示

Question

Twitter Bootstrap的工具提示非常好用，但是它们无法与<area>标签一起使用 :( 我该如何解决？

我注意到JavaScript是可以正常工作的，工具提示元素也被创建出来了，但位置不对。

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

- Anton

Answer 1

我喜欢Twitter bootstrap，但其中一些js插件在当前形式下有点简单。

试试qTip 2 - http://qtip2.com/

它可以做任何事情，包括图像映射 - http://qtip2.com/demos/#imagemaps

而且你只需要调整输出类到bootstrap的类就行了。

- jackmcpickle

---

很酷的插件，感谢提供信息。这是图像映射功能的更新链接（现在似乎是一个附加组件）：http://qtip2.com/plugins#imagemap - JP Lew

Answer 2

最近我也遇到了类似的问题，想在Bootstrap中使用图像映射区域并使工具提示正常工作，但最终放弃了。

我选择了ImageMaster，这是一个jQuery插件，用于制作图像映射，并具有工具提示等选项。

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

https://github.com/jamietre/ImageMapster

ImageMapster在使用Bootstrap的CSS时出现了一些问题，但作者很友善地为我解决了这个问题，所以现在应该可以很好地工作了！

- Phil

---

谢谢您的回复。 看起来我应该获取另一个工具提示库或者自己创建漂亮的工具提示（这并不难：）） - Anton

Answer 3

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

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

祝一切顺利！

- user1196957