Short backlinks with tooltip window on hover

[salhol]

Based on #3354 and the demo backlink icon css I added a tooltip window to display the hidden link when hovering.

Tooltip window is resized based on viewport width, the position depends on available space, and uses mostly CSS variables so it shouldn't be too ugly on different themes.

Requirements

1. Templater plugin
2. Custom JavaScript code in a markdown file
3. Custom CSS code in a css file

JavaScript

Create a new note in your templates or script folder like this:

<%*
const setupTaskTooltips = () => {
	// Creates 1 reusable tooltip element
    let tooltipEl = null;

    const createTooltip = () => {
        tooltipEl = document.createElement("div");
        tooltipEl.className = "tasks-native-tooltip";
        document.body.appendChild(tooltipEl);
    };
	
	// Show tooltip window with edge detection on hover
    const showTooltip = (link) => {
        // Creates a tooltip if none exist
        if (!tooltipEl) createTooltip();

        // Get link content
        tooltipEl.textContent = link.innerText.trim();
        tooltipEl.style.opacity = "1";
		
		// Set gap between link and tooltip
        const spacing = 16;
		// Measure link position on hover
        const rect = link.getBoundingClientRect();

        // Removes old tooltip measurements
        tooltipEl.style.left = "0px";
        tooltipEl.style.top = "0px";
		
		// Measures tooltip size
        const tooltipRect = tooltipEl.getBoundingClientRect();
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

		// Calculate tooltip window position
        // Default: center above the link
        let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);

        // Clamp left edge
        if (left < spacing) {
            left = spacing;
        }

        // Clamp right edge
        if (left + tooltipRect.width > viewportWidth - spacing) {
            left = viewportWidth - tooltipRect.width - spacing;
        }

        // Prefer placing above the link
        let top = rect.top - tooltipRect.height - spacing;
        let placedAbove = true;

        // If not enough space above, try below
        if (top < spacing) {
            top = rect.bottom + spacing;
            placedAbove = false;
        }

        // If placed below but overflowing bottom = clamp upward
        if (!placedAbove && top + tooltipRect.height > viewportHeight - spacing) {
            top = viewportHeight - tooltipRect.height - spacing;
        }

        // If placed above but still overflowing top (very tall tooltip) = clamp
        if (placedAbove && top < spacing) {
            top = spacing;
        }
		// Get final position of tooltip window
        tooltipEl.style.left = `${left}px`;
        tooltipEl.style.top = `${top}px`;
    };
	
	// Hide tooltip when not in use
    const hideTooltip = () => {
        if (tooltipEl) {
            tooltipEl.style.opacity = "0";
        }
    };

	// Bind events per link
    const bindLink = (link) => {
        // Prevent duplicate listeners
        if (link.dataset.tooltipBound) return;
        link.dataset.tooltipBound = "true";

        // Mouse
        link.addEventListener("mouseenter", () => showTooltip(link));
        link.addEventListener("mouseleave", hideTooltip);

        // Keyboard accessibility
        link.addEventListener("focus", () => showTooltip(link));
        link.addEventListener("blur", hideTooltip);

        // Touch support
        link.addEventListener("click", hideTooltip);
    };

	// Looks for new tasks links
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (!(node instanceof HTMLElement)) return;

                // If the node itself is a task link
                if (node.matches?.('li.plugin-tasks-list-item span.tasks-backlink > a')) {
                    bindLink(node);
                }

                // Or if it contains task links
                node.querySelectorAll?.(
                    'li.plugin-tasks-list-item span.tasks-backlink > a'
                ).forEach(bindLink);

            });
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
};

setupTaskTooltips();
%>

Templater Startup Templates

1. Go to "Settings" > "Community plugins" > "Templater" and scroll down to "Startup templates".
2. Select the new note with the JavaScript code.
3. Restart Obsidian

CSS Snippet

1. Create a new .css file in the .obsidian/snippets folder.

/* Hides and anchor Tasks original backlink text */
li.plugin-tasks-list-item span.tasks-backlink > a {
    font-size: 0;                 
    text-decoration: none;
    cursor: var(--cursor-link);
}

/* Replace link text with emoji icon */
li.plugin-tasks-list-item span.tasks-backlink > a::before {
    /* Short link emoji replacement */
    content: "🔗";
    font-size: var(--font-text-size);
    line-height: var(--line-height-tight);
    /* Optional: Underline and pointer cursor for better UX */
    text-decoration: var(--link-decoration);
}

/* JS Tooltip window on hover */
.tasks-native-tooltip {
    /* Window positioning */
    position: fixed;
    z-index: var(--layer-tooltip);
    
    /* Window styling */
    background-color: var(--background-secondary-alt);
    border: var(--border-width) solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-s);
    backdrop-filter: var(--blur-s);
    padding: var(--size-4-2) var(--size-4-3);

    /* Tooltip text styling */
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    font-weight: calc(var(--font-weight) + var(--bold-modifier));
    line-height: var(--line-height-normal);
    pointer-events: none;

    /* Width handling */
    max-width: min(600px, 80vw);
    width: max-content;
    white-space: normal;
    word-break: break-word;
    text-align: left;

    /* Animation */
    opacity: 0;
    transform: translateY(var(--size-2-1));
    transition: 
        opacity 120ms var(--ease-in-out),
        transform 120ms var(--ease-in-out);
}

/* Show tooltip with fade-in animation */
.tasks-native-tooltip[style*="opacity: 1"] {
    transform: translateY(0);
}

/* Fallback container for tooltip when JS is disabled, using CSS only */
.tasks-list-container,
.plugin-tasks-query-result,
.monitoring-container,
div[class*="tasks-list"] {
    contain: none !important;
    overflow: visible !important;
}

2. Go to "Settings" > "Appearance" > "CSS snippets" and enable your new CSS snippet.
3. Enjoy.