0

会場、会場タイプ、マピコンの表があります。関係は次のとおりです。

  • 会場はvenuetypeに属します
  • 会場タイプはmapiconに属します

各会場の結果は、インデックスページにパーシャルとして表示されます。各パーシャルには、JavaScriptのビットで配置されたdivとして会場に関連付けられたマップアイコンが含まれています。

関連する会場名を表示するツールチップをマピコンに追加するにはどうすればよいですか？

これがjsFiddleです。（qTipプラグインをリソースとして追加しました）

赤い丸にカーソルを合わせると、青い丸にカーソルを合わせると、会場名、赤のテスト、青のテストを示すツールチップが表示されます。

助けてくれてありがとう！

4

2 に答える 2

1

フィドル

CSS スタイルの一部は、希望どおりに表示するために変更する必要がありますが、ツールチップは希望どおりに表示されるようになりました。

jQuery

$(document).ready(function() {

    $("#venue_map_icon_11").hover(関数() {
        $("#Tipvenue_map_icon_11").show();
    }、 関数（） {
        $("#Tipvenue_map_icon_11").hide();
    });


    $("#venue_map_icon_9").hover(関数() {
        $("#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 に答える