Adding a popover to tags?

Developers: Plugin & API
,
1

I’m working on a plugin, and trying to find a way to have a popover show up when you hover over a tag that starts with a specific character. It should look pretty similar to a live preview of a page, but the content will be generated based on the content of the tag and some data provided by the plugin.

(The data is currently stored in .json files in the plugin directory, and the relevant file to import is selected based on the tag content. Only one file has to be loaded per tag, but the view does have to grab the right section out of it, and the files are up to several hundreds of thousands of lines long. In the side pane version of the view, the content for a page with three relevant tags takes 1-3 seconds to load. This is currently not really a problem, but obviously speed could be a bit of a concern.)

I’ve already succeeded in creating a view with the right content in a side pane, where it shows the required content for each tag in the page, but I would like to display it when the user hovers over an individual tag.

So far I’ve managed to get a little hover element to show up when required, but it doesn’t work super smoothly, and it also only disappears once you hover over a different tag that makes a new one appear.

This is the relevant code, currently:

main.js

	this.hoverPassage = new HoverPassage(this.app);
    document.addEventListener('mouseover', this.handleMouseOver.bind(this));

hover.js

import { App } from 'obsidian';

export default class HoverPassage {
    private app: App;
    private hoverElement: HTMLElement | null = null;

    constructor(app: App) {
        this.app = app;
    }

    showHoverPane(tag: string, mouseX: number, mouseY: number) {
        this.hideHoverPane(); // Close any existing hover pane
        this.createHoverElement(tag);
        if (this.hoverElement) {
            this.hoverElement.style.left = mouseX + 'px';
            this.hoverElement.style.top = mouseY + 'px';
            document.body.appendChild(this.hoverElement);
        }
    }

    hideHoverPane() {
        if (this.hoverElement && this.hoverElement.parentElement) {
            this.hoverElement.parentElement.removeChild(this.hoverElement);
            this.hoverElement = null;
        }
    }

    createHoverElement(tag: string) {
        this.hoverElement = document.createElement('div');
        this.hoverElement.classList.add('hover-pane');
        this.hoverElement.textContent = tag; // Remove the '#§/' prefix
    }
};

I’ve previously achieved what I want this plugin to do by using Tag Wrangler and writing a script to generate tag pages in the Vault with an advanced dv.view block in each page; that way the regular page preview worked, but it’s just not a good solution for wider distribution, and it also means that a page has to exist in the Vault for every tag you might want to show content for.

This is my first plugin, so I might be thinking entirely in the wrong direction here. If clicking the tag would be a lot easier than hovering, that would be fine too, but I thought it would probably interfere with the core ‘tag-clicking’ function. Ctrl+click is already used for "create tag page’ by the Tag Wrangler plugin.

Anyway, I’d really appreciate some tips on how to make this work, and am also very open to ideas about better ways to do it!