При использовании плагина всплывающей подсказки qtip jquery на экране должна быть активна только одна подсказка - PullRequest
Новая
       4

При использовании плагина всплывающей подсказки qtip jquery на экране должна быть активна только одна подсказка

2 голосов
/ 28 сентября 2011

Я использую подсказку jquery qtip для нескольких элементов (изображений) на странице.Я пытаюсь, чтобы на странице отображалась только одна подсказка.Если отображается всплывающая подсказка и была открыта другая всплывающая подсказка, текущий открытый экземпляр должен закрыться. Я нашел это в документации и установил solo: true , однако на странице все еще появляются несколько экземпляров всплывающей подсказки.Вот мой jquery: 

<script type="text/javascript">
        $(document).ready(function () {

            //****** tooltips **********
            $('img.help').hover(function () {

          // Destroy currrent tooltip if present
          //if ($(this).data("qtip")) $(this).qtip("destroy");

          $(this) // Set the links HTML to the current opposite corner
            .qtip({
                content: 
                {
                    text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page', 
                        title: {
                        text: 'This toolip title',
                        button: 'Close'
                        }
                },
                position: {
                    corner: {
                        tooltip: 'bottomLeft', // Use the corner...
                        target: 'topRight' // ...and opposite corner
                    }
                },
                show: {
                    solo: true,
                    when: false, // Don't specify a show event
                    ready: true // Show the tooltip when ready
                },
                hide: false, // Don't specify a hide event
                style: {
                    border: {
                        width: 5,
                        radius: 10
                    },
                    padding: 10,
                    textAlign: 'left',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'blue' // Style it according to the preset 'cream' style
                    // name: 'light' // Style it according to the preset 'cream' style
                }
            });


      });

});

html: 

<div>
                    <div class="left sublabel">
                        Parameds</div>
                    <div class="left help">
                        <img src="images/help.png" class="help" /></div>
                    <div class="clear">
                    </div>
                </div>
                <div>
                    <div class="left sublabel">
                        Vision</div>
                    <div class="left help">
                        <img src="images/help.png" class="help" /></div>
                    <div class="clear">
                    </div>
                </div>

1 Ответ

2 голосов
/ 12 октября 2011

Я полагаю, почему они все еще отображаются, хотя для соло установлено значение true, потому что все экземпляры qtip имеют один и тот же класс. У меня всегда были разные имена классов в моих экземплярах qtips, когда я имел дело с несколькими подсказками на одной странице, и этот способ работал для меня.

Если по какой-то причине это не сработает, попробуйте скрыть все всплывающие подсказки в методе beforeShow api. 

$('#tooltip').qtip({
   ...
   api: {
      beforeShow: function() {
         $('img.help').qtip("hide");
      }
   }
});
...