0

我有一张场地、场地类型和地图图标的表格，它们的关系是：

  • 场地属于场地类型
  • 场地类型属于mapicon

每个场地结果在索引页面上显示为一个部分，每个部分都包含与场地相关的地图图标作为一个 div，该 div 使用一些 javascript 定位。

如何将工具提示添加到将显示其关联场所名称的地图图标？

这是一个jsFiddle。（我已将 qTip 插件添加为资源）

当您将鼠标悬停在红色圆圈上时，我希望它在悬停蓝色圆圈时显示一个工具提示，说明场地名称、红色测试和蓝色测试。

谢谢你的帮助！

4

2 回答 2

1

小提琴

您的一些 CSS 样式需要修改以使其看起来像您想要的那样，但是工具提示现在看起来像您想要的那样。

jQuery

$(文档).ready(函数() {

    $("#venue_map_icon_11").hover(function() {
        $("#Tipvenue_map_icon_11").show();
    }， 功能（） {
        $("#Tipvenue_map_icon_11").hide();
    });


    $("#venue_map_icon_9").hover(function() {
        $("#Tipvenue_map_icon_9").show();
    }， 功能（） {
        $("#Tipvenue_map_icon_9").hide();
    });

});

修改后的 HTML

<a href="/venues/9-red-test">
    <div class="venue_partial">
        <div id="Tipvenue_map_icon_9" class="venue_partial_name red" style="display:none;">Red Test</div>

        <div style="position:absolute;left:50px;top:100px;" class="mapicon">
            <img id="venue_map_icon_9" alt="Bluecircle" src="http://i1187.photobucket.com/albums/z397/lemmon8/redcircle.png" />
        </div>
    </div>
</a>

<a href="/venues/11-blue-test">
  <div class="venue_partial">
    <div id="Tipvenue_map_icon_11" class="venue_partial_name blue" style="display:none;">Blue Test</div>

    <div style="position:absolute;left:125px;top:75px;" class="mapicon"> 
        <img id="venue_map_icon_11" alt="Redcircle" src="http://i1187.photobucket.com/albums/z397/lemmon8/bluecircle.png" />
    </div>
  </div>
</a>
于 2012-01-31T21:26:38.243 回答
0

为了显示相关的场地名称，我需要为 qTip 分配一个选项以锁定，我使用标题并将其添加到每个地图图标中，因为它在部分中创建：

<%= image_tag (venue.mapicon.url(:mapicon)), :title => venue.name %>

呈现的 HTML 如下所示：

<img alt="Bluecircle" src="http://i1187.photobucket.com/albums/z397/lemmon8/redcircle.png" title="Blue Test" />

qTip 是通过以下方式实现的：

$(document).ready(function() {
    $('img[title]').qtip();
});

更新了 jsFiddle

于 2012-02-01T22:06:26.597 回答