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

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>

我的问题是，当我点击时，文本变为关闭，但提示框没有显示。当我再次点击时，文本变为打开，我才能看到提示框。我该怎么办？

- Jayyrus

---

为什么要在纯JS中混用jQuery？当你使用jQuery的时候，就不需要像getElementById这样的东西了。此外，“href=“javascript：...””是不好的；最好使用“onclick”！ - ThiefMaster

Answer 1

您应该在onclick处理程序之前初始化qtip。

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

- Pulkit Goyal

---

他想要仅在链接文本为“打开”时显示提示。 - Nicola Peluchetti

好的，这个可以工作，但是当我再次点击 qtip 时它不会自动隐藏，我该怎么办？ - Jayyrus

@user1190704 hide也有一个事件：http://craigsworks.com/projects/qtip2/docs/hide/ - user800014

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 选项，这样只有当你的元素包含文本“打开”时才会显示提示

- Nicola Peluchetti

---

@user1190704 当你点击“关闭”时？ - Nicola Peluchetti

文本将不会在我点击打开时更改。 - Jayyrus

@user1190704，你按照我的示例去掉了JavaScript吗？ - Nicola Peluchetti

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")')
            }
        }
    });
});

- daniyel

---

当我点击关闭时，工具提示再次显示，因此它没有隐藏。我认为这是因为显示和隐藏事件有相同的方式去处理。 - Jayyrus

在我的本地测试中，这个程序很奇怪，但是能正常工作。打开显示，关闭隐藏。 - daniyel

抱歉..一切正常！ :) 我忘记了 CSS，但不知道为什么现在可以工作 :P 很好，谢谢！ - Jayyrus

还有什么方法可以在鼠标点击外部时隐藏工具提示？我该怎么办？因此，我必须向工具提示的隐藏部分添加另一个事件。 - Jayyrus

点击外面？你的意思是在文档（页面）上任何地方都可以点击吗？ - daniyel

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>

- Rob Angelier

Answer 5

我认为你可以使用：

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

是拥有经典工具提示的最佳方式。

- Jayyrus