<style>

  [role="tooltip"],
  .hidetooltip.hidetooltip.hidetooltip+[role="tooltip"] {
    visibility: hidden;
    position: absolute;
    top: 2rem;
    left: 5rem;
  }

  [aria-describedby]:hover,
  [aria-describedby]:focus {
    position: relative;
  }

  [aria-describedby]:hover+[role="tooltip"],
  [aria-describedby]:focus+[role="tooltip"] {
    visibility: visible;
  }
</style>
<div class="tester">
  <label class="hoo-label" for="password">Password:</label>
  <input class="hoo-input-text" aria-describedby="passwordrules" id="password" type="password" />
  {{> atoms-tooltip }}
</div>