Как показать подсказку при клике

Question

Я пытаюсь использовать qtip2 .Моя проблема в том, что я хочу показывать всплывающую подсказку только тогда, когда пользователь нажимает href с указанным html внутри.Поэтому я пытаюсь это сделать:

function help(){
    var link = document.getElementById('helps');
    if(link.innerHTML=="Open"){
        $('#helps').qtip({
           content: {
              text: 'I get shown on click'
           },
           show: {
              event: 'click'
           }
        });
    link.innerHTML = "Close";
    }else{
        link.innerHTML="Open";
    }
}
<a href="javascript:help()" id="helps">Open</a>

Моя проблема в том, что когда я нажимаю, текст становится Close, но подсказка не отображается.Когда я нажимаю снова, текст становится Open, и я вижу подсказку.Что я могу сделать?

Answer 1

Вы должны инициализировать qtip перед обработчиком onclick.

$('#helps').qtip({
  content: {
    text: 'I get shown on click'
  },
  show: {
    event: 'click'
  }
});

function help() {
  var link = document.getElementById('helps');
  if (link.innerHTML == "Open") {
    link.innerHTML = "Close";
  } else {
    link.innerHTML = "Open";
  }
} 

< a href = "javascript:help()" id = "helps" > Open < /a>

Answer 2

Я бы сделал это так:

JS код:

$(function(){
    $('#helps').qtip({
        content: {
            text: 'I get shown on click'
        },
        show: {
            event: 'click'
        },
        hide: {
            event: 'click'
        }
    }).click(function() {
        var _$this = $(this);

        if(_$this.html() === 'Open') {
            _$this.html('Close');
        } else {
            _$this.html('Open');
        }
    })
});

HTML one:

<a href="javascript:void(0)" id="helps">Open</a>

РЕДАКТИРОВАТЬ: Чтобы скрыть всплывающую подсказку при внешнем щелчке:

$(function(){           
    $(this).click(function(e) {
        var _$elm = $(e.target);
        if(_$elm.attr('id') !== 'helps') {
            $('#helps').qtip('hide');
        }               
        return false;
    });

    $('#helps').click(function() {
        var _$this = $(this);               
        if(_$this.html() === 'Open') {
            _$this.html('Close').qtip('enable');                                    
        } else {
            _$this.html('Open').qtip('disable').qtip('hide');                   
        }
    }).qtip({
        content: {
            text: 'I get shown on click'
        },
        show: {
            event: 'click',
            when: {
                target: $('#helps:contains("Open")')
            }
        },
        hide: {
            event: 'click',
            when: {
                target: $('#helps:contains("Close")')
            }
        }
    });
});

Answer 3

Вы должны сделать

$('#helps').qtip({
    content: {
        text: 'I get shown on click'
    },
    show: {
        event: 'click',
        target: $('#helps:contains("Open")')
    }
});

$('#helps').click(function() {
    if (this.innerHTML=="Open") {
        this.innerHTML = "Close";
    } else {
        this.innerHTML="Open";
    }
});

<a id="helps">Open</a>

Ваш код не работал, потому что вы создавали qTip при первом клике!Вам следует использовать опцию target qTip, чтобы подсказка отображалась только в том случае, если ваш элемент содержит текст «Open»

Answer 4

я думаю, что вы могли бы использовать:

$ ('# help'). Qtip ({content: {text: 'меня показывают по клику'});

- лучшийспособ получить классическую подсказку ..

Answer 5

или даже лучше, используйте jQuery для всех ваших JS-скриптов:

$(function(){
   $('a.tooltip').qtip(
   {
      content: 'Some basic content for the tooltip!',
      api:{
              onShow: function(){
                  $('a.tooltip').html('Close');
              },
              onHide: function(){
                  $('a.tooltip').html('Open');
              }
      },
    show: {
      when: {
            event: "click"
      }
    }
   });
});

<a class='tooltip' href='#'>Click me!!</a>