Question

我正在尝试使用qtip2。我的问题是，我只想在用户点击内部指定html的href时显示工具提示。所以我试试这个：

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

你应该做

$('#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！您应该使用qTip的target选项，以便仅当您的元素包含“打开”文本时才显示提示

Answer 3

我会这样做：

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 4

甚至更好，为所有JS脚本使用jQuery：

$(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>

Answer 5

我认为你可以使用：

$（ '＃有助于'）。qtip（{ 内容：{ 文字：'我点击了' }）;

是获得经典工具提示的最佳方式..

如何在点击时显示工具提示

5 个答案: