tooltip

Add message using jquery powertip

by keke3

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