的jQuery

Question

我有一个场地，venuetypes和mapicons的关系表：

场地属于venuetype
venuetype属于mapicon

每个场地结果在索引页面上显示为部分，每个部分包含场地相关的地图图标作为div，其位置带有一点点javascript。

如何向mapicons添加工具提示，以显示其关联的场地名称？

继承人jsFiddle。 （我已将qTip插件添加为资源）

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

感谢您的帮助！

Answer 1

FIDDLE

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

的jQuery

$(document).ready(function() {

    $("#venue_map_icon_11").hover(function() {
        $("#Tipvenue_map_icon_11").show();
    }, function() {
        $("#Tipvenue_map_icon_11").hide();
    });


    $("#venue_map_icon_9").hover(function() {
        $("#Tipvenue_map_icon_9").show();
    }, function() {
        $("#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>

Answer 2

要显示相关的地点名称，我需要为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

如何使用qtip获取工具提示在此方案中工作？

2 个答案:

FIDDLE

的jQuery

修改HTML