How to make a tooltip with the same look and feel as when we add "title" attribute to an e-CodePudding

I am trying to replicate the look and feel of the tooltip when we add the "title" attribute to an element.

Tooltip should be hovarable
Tooltip should be dismissable by pressing the Esc key

Currently, my custom tooltip is not hoverable. Also the look and feel is not matched with - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title

Any help is really appreciated and thanks in advance

const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");

tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
tooltipText.addEventListener("keydown", dismissTooltip);

function showTooltip() {
  tooltipText.style.visibility = "visible";
}

function hideTooltip() {
  tooltipText.style.visibility = "hidden";
}

function dismissTooltip(event) {
  if (event.keyCode === 27) {
    tooltipText.style.visibility = "hidden";
  }
}

.tooltip-text {
    visibility: hidden;
    position: absolute;
    background-color: #000;
    color: #fff;
    padding: 4px;
    z-index: 1;
}

.tooltip-trigger{
    cursor: pointer;
}

.tooltip-trigger:hover .tooltip-text {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Tooltip</title>
  </head>
  <body>
    <span  aria-describedby="tooltip-text"
      >Hover over me</span
    >
    <div id="tooltip-text"  role="tooltip">
      This is the tooltip text
    </div>
    <script src="script.js"></script>
  </body>
</html>

CodePudding user response：

const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");

let timeout = null;

tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
window.addEventListener("keydown", dismissTooltip);

function showTooltip(event) {
  timeout = setTimeout(() => {
    tooltipText.style.visibility = "visible";
    tooltipText.style.left = `${event.clientX}px`
    tooltipText.style.top = `${event.clientY}px`
  }, 1000)
}

function hideTooltip() {
  clearTimeout(timeout);
  timeout = null;
  tooltipText.style.visibility = "hidden";
}

function dismissTooltip(event) {
  if (event.key === 'Escape') {
    tooltipText.style.visibility = "hidden";
  }
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 4px;
  z-index: 1;
}

.tooltip-trigger {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Tooltip</title>
</head>

<body>
  <span  aria-describedby="tooltip-text">Hover over me</span
    >
    <div id="tooltip-text"  role="tooltip">
      This is the tooltip text
    </div>
    <script src="script.js"></script>
  </body>
</html>

CodePudding user response：

I am not so sure, but only with Css to persist the hover state for tooltip is not achievable.

Also the above posted answer is not applicable as, the author requested to make the tooltip hoverable which is not answered