Tooltip

by kpulkit29

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tooltip with Options</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <a href="#" class="link" data-tooltip="This is a tooltip on top">Tooltip on Top</a>
<!--         <a href="#" class="link" data-tooltip="This is a tooltip on the left">Tooltip on Left</a>
        <a href="#" class="link" data-tooltip="This is a tooltip on the right">Tooltip on Right</a>
        <a href="#" class="link" data-tooltip="This is a tooltip on the bottom">Tooltip on Bottom</a>
        <a href="#" class="link" data-tooltip="This is a tooltip with many links!">Many Links (Event Delegation)</a> -->
        </div>
    <div id="tooltip"></div>
    <script src="script.js"></script>
</body>
</html>

CSS

.container {
    display: flex; /* Or any desired layout */
    margin: 20px;
}

.link {
    margin: 5px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
}

.link:hover + #tooltip {
    display: block;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    position: absolute;
    z-index: 10;
}

#tooltip {
    display: none;
    font-size: 14px;
}

/* Optional styling for different tooltip positions */
#tooltip.top {
    top: -100%; /* Position tooltip above the link */
}

#tooltip.left {
    left: -100%; /* Position tooltip to the left of the link */
}

#tooltip.right {
    left: 100%; /* Position tooltip to the right of the link */
}

#tooltip.bottom {
    top: 100%; /* Position tooltip below the link */
}

JavaScript

const links = document.querySelectorAll('.link');
const tooltip = document.getElementById('tooltip');

function showTooltip(e) {
debugger;
    const link = e.target;
    const tooltipText = link.dataset.tooltip;

    // Calculate tooltip position dynamically
    const linkRect = link.getBoundingClientRect();
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    let top = linkRect.top + window.scrollY;
    let left = linkRect.left + window.scrollX;

    // Determine tooltip placement based on available space
    const tooltipWidth = tooltip.offsetWidth;
    const tooltipHeight = tooltip.offsetHeight;

    if (top - tooltipHeight >= 0) { // Top
        tooltip.classList.add('top');
    } else if (left + tooltipWidth <= windowWidth) { // Left
        tooltip.classList.remove('top', 'bottom', 'right');
        left -= tooltipWidth; // Adjust left position for left placement
    } else if (left - tooltipWidth >= 0) { // Right
        tooltip.classList.add('right');
        left += linkRect.width; // Adjust left position for right placement
    } else { // Bottom (if no space above or on sides)
        tooltip.classList.add('bottom');
        top += linkRect.height; // Adjust top position for bottom placement
    }

    tooltip.textContent = tooltipText;
    tooltip.style.top = `${top}px`;
    tooltip.style.left = `${left}px`;
    tooltip.style.display = `block`;
}

function hideTooltip() {
    tooltip.classList.remove('top', 'left', 'right', 'bottom');
    tooltip.textContent = '';
}

// Event delegation for multiple links
links.forEach(link => {
    link.addEventListener('mouseenter', showTooltip);
    link.addEventListener('mouseleave', hideTooltip);
});