【问题标题】:Twitter Bootstrap: tooltips on html map areaTwitter Bootstrap:html 地图区域的工具提示
【发布时间】:2012-07-25 20:52:44
【问题描述】:

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

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

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

【问题讨论】:

    标签: twitter-bootstrap tooltip area


    【解决方案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 可以通过其他页面进行自定义。

    一切顺利!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-10-29
      • 1970-01-01
      • 1970-01-01
      • 2018-05-15
      • 1970-01-01
      • 1970-01-01
      • 2012-05-13
      相关资源
      最近更新 更多