Как я могу получить всплывающую подсказку для работы в этом сценарии, используя qtip? - PullRequest
Новая
       17

Как я могу получить всплывающую подсказку для работы в этом сценарии, используя qtip?

0 голосов
/ 01 февраля 2012

У меня есть таблица мест, venuetypes и mapicons, связь между которыми:

  • Место проведения принадлежит venuetype
  • venuetype принадлежит mapicon

Каждыйрезультат объекта отображается на странице индекса как частичное, причем каждый частичный объект содержит значок карты, связанный с местами, в виде элемента div, который позиционируется с небольшим количеством javascript.

Как добавить всплывающую подсказку к mapicons, которая будет отображатьсяназвание ассоциированного места?

Вот jsFiddle . (я добавил плагин qTip в качестве ресурса)

Когда вы наводите курсор мыши на красный круг, мне бы хотелось, чтобы при отображении всплывающей подсказки отображалась подсказка с названием места проведения, Красный тест и Синий тест.синий круг.

Спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 01 февраля 2012

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>
0 голосов
/ 02 февраля 2012

Чтобы отобразить название связанного места, мне нужно было назначить опцию 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

...