1

我有一个使用 Qtip 的图像映射，我希望工具提示同时显示在左眼和右眼上，但工具提示没有显示。

这是我的 JS 代码：

$(document).ready(function() 
{
  $('area[alt]').qtip(
  {
     content: {
          attr: 'alt'
     },
     hide: {
          fixed: true,
          delay: 500
     },
     style: {
      classes: 'qtip-tipsy qtip-shadow'
     },
     position: {
      viewport: $(window)
     }
  });
});

这是HTML：

<map name="Koala">
<area alt="Left Eye" shape="rect" coords="373,365,404,402" href="#" />
<area alt="Right Eye" shape="rect" coords="641,405,681,448" href="#" />
<!-- .... more hotspots would be listed here -->
</map>

当我尝试此代码时，Qtip 根本没有出现，我不知道为什么，任何帮助将不胜感激！

4

1 回答 1

1

以 qtip 页面 http://jsfiddle.net/craga89/v2WPz/中提供的演示小提琴为例

然后修改你的以反映你想要的更改，它应该可以工作。

这是最终版本：

jsfiddle.net/v2WPz/775

<div id="demo-imagemap">
    <h3>United States of America</h3>

    <img border="0" usemap="#statesMap" alt="USA" src="http://www.wallpaperpimper.com/wallpaper/Animal/Koalas/Koala-Bear-Australia-1-1024x768.jpg">
    <map id="statesMap" name="statesMap">
<area alt="Left Eye" shape="rect" coords="373,365,404,402" href="#" />
<area alt="Right Eye" shape="rect" coords="641,405,681,448" href="#" />
    </map>

    <p class="attribution">
        imagemap courtesy of <a href="http://www.americanbanker.com/state/state.html">American Banker</a>
    </p>
</div>

Javascript：

// Create the tooltips only when document ready
$(document).ready(function()
{
    // We'll target all AREA elements with alt tags (Don't target the map element!!!)
    $('area[alt]').qtip(
    {
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
        style: {
            classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
        }
    });
});
于 2013-03-07T17:48:02.940 回答