javascripttippyjs

How to force the tippy cloud to open?

I have a username text field and a mechanism to remove spaces in it. After moving to the next field, the tippy "spaces removed" will be displayed. The cloud is visible all the time. However, when I move the cursor over the username field and move away from it, the cloud disappears. I want it to be visible all the time.

Code Snippet

function trimWhitespaceUserName() {
  var usernameInput = document.getElementById('username');
  var originalValue = usernameInput.value;
  var trimmedValue = originalValue.replace(/\s/g, '');
  usernameInput.value = trimmedValue;

  var usernameInputColor = document.getElementById("username");

  if (usernameInput.tippyInstance) {
    usernameInput.tippyInstance.destroy();
  }

  if (originalValue !== trimmedValue) {
    if (!usernameInput.tippyInstance) {
      usernameInput.tippyInstance = tippy(usernameInput, {
        content: 'spaces removed',
        placement: 'left',
        arrow: true,
        hideOnClick: false,
        interactive: true,
        sticky: true,
      });

      usernameInputColor.addEventListener("mouseenter", () => {
        usernameInputColor.style.backgroundColor = "red";
      });

      usernameInputColor.addEventListener("mouseleave", () => {
        usernameInputColor.style.backgroundColor = "yellow";
      });

      usernameInput.tippyInstance.show();
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  trimWhitespaceUserName();
});
<div>
  <input type="text" id="username" value="first last">
</div>

<!-- Popper + Tippy -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

Solution

  • The trigger option allows you top specify what triggers the tooltip.

    The default is trigger: 'mouseenter focus' - you could add mouseleave blur to that, so that those events also trigger showing it (again.)

    But the more direct way would probably be trigger: 'manual' - then it only gets activated programmatically, and further user interaction with the element will not make it disappear again.