2

I'm coding a messaging tool using jQuery Powertip. I want to:

  • show tooltip after clicking select
  • hide tooltip after selecting an option

It works properly only Chrome Browser, but NOT work properly on Firefox. On Firefox, a tooltip does not hide after selection an .

I've tried to change the code using other events, but not works

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

Sample on jsFiddle is here: https://jsfiddle.net/keke3/7xk3njz8/7/

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
keke
  • 21
  • 1
  • Given that the `input change` won't fire if you click the same options twice, and nothing happens if you click outside (adding `blur` will though) , consider this for a cross browser solution: https://stackoverflow.com/questions/30729501/check-if-select-is-displaying-options – Asons Apr 17 '19 at 09:16
  • Thank you for your usefull tip! I'll try to improve the code by it. – keke Apr 17 '19 at 09:49

1 Answers1

0

Try the following...

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

Working example: https://jsfiddle.net/y2f5wx7d/

Levi Cole
  • 3,561
  • 1
  • 21
  • 36
  • It works proper! Many thanks for your hack! The comments on the code are also helpful to understand. – keke Apr 17 '19 at 09:49