如何在 FireFox 浏览器上隐藏 Powertip 工具提示答案

【问题标题】：How to hide Powertip tooltips on FireFox browser如何在 FireFox 浏览器上隐藏 Powertip 工具提示
【发布时间】：2019-04-17 17:29:39
【问题描述】：

我正在使用 jQuery Powertip 编写消息传递工具。我想：

单击选择后显示工具提示
选择选项后隐藏工具提示

它仅适用于 Chrome 浏览器，但不适用于 Firefox。在 Firefox 上，工具提示不会在选择后隐藏。

我尝试使用其他事件更改代码，但不起作用

$(function() {
  $('select').powerTip({
    manual: true,
    placement: "sw-alt",
    fadeOutTime: 0,
    closeDelay: 0
  });

  $("#bar").on("focus click", function() {
    var tooltipText = 'Message!';
    $(this).data("powertip", tooltipText);
    $.powerTip.show(this);
  });

  $("#bar").on("input change", function() {
    $.powerTip.hide();　　　　
    document.activeElement.blur()
  });
});

<h1>Tooltip</h1>
<select name="foo" id="bar">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-powertip@1.3.1/dist/jquery.powertip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-powertip@1.3.1/dist/css/jquery.powertip.css">

jsFiddle 的示例在这里：https://jsfiddle.net/keke3/7xk3njz8/7/

【问题讨论】：

鉴于input change 不会触发，如果您单击相同的选项两次，并且如果您单击外部没有任何反应（添加blur 会），请考虑将此作为跨浏览器解决方案： stackoverflow.com/questions/30729501/…
感谢您的有用提示！我会尝试通过它来改进代码。

标签： javascript jquery

【解决方案1】：

试试下面...

$(function() {
  var $tooltip = $('select').powerTip({
    manual: true,
    placement: 'sw-alt',
    fadeOutTime: 0,
    closeDelay: 0
  });

  $tooltip.on('focus mouseup', function() {
    var tooltipText = 'Message!';
    $tooltip.data('powertip', tooltipText);
    $tooltip.powerTip('show'); // Trigger show
  });

  $tooltip.on('input change blur', function() {
    $tooltip.powerTip('hide', true); // Hide element immediately with no delay
    $tooltip.blur(); // "Un-focus"
  });
});

工作示例：https://jsfiddle.net/y2f5wx7d/

【讨论】：

它工作正常！非常感谢您的破解！代码上的cmets也有助于理解。