javascript - 如何在 FireFox 浏览器上隐藏 Powertip 工具提示

Question

我正在使用 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/

Answer 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/