Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/Demos/ParseAndDisplayDemo/
Upload File :
Current File : //home/beeson/public_html/WebMathXpert/Demos/ParseAndDisplayDemo/ToolTipTest.html

<!DOCTYPE html>
<html>
<head>
<style>
  #button {
    position: relative;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }

  #tooltip {
    display: none;
    position: absolute;
    bottom: 100%; /* Position the tooltip above the button */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background-color: black;
    color: white;
    border-radius: 3px;
    white-space: nowrap;
  }

  #tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* Arrow pointing down */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
</style>
</head>
<body>

<button id="button">Hover me</button>
<div id="tooltip">Tooltip text</div>

<script>
  const button = document.getElementById('button');
  const tooltip = document.getElementById('tooltip');

  function showTooltip() {
    tooltip.style.display = 'block';
  }

  function hideTooltip() {
    tooltip.style.display = 'none';
  }

  button.addEventListener('mouseenter', showTooltip);
  button.addEventListener('mouseleave', hideTooltip);
</script>

</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists