Question

我有一个使用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根本没有出现，我无法弄清楚原因，任何帮助都会非常感激！

Answer 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'
        }
    });
});

Qtip2的图像映射不起作用

1 个答案: