tooltip

Add message using jquery powertip

HTML

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

JavaScript

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