Tooltips

De tooltip-menuopties configureren standaard- en aangepaste tooltips voor knooppunten en randen.

Standaard:

• Tooltips zijn ingeschakeld.
• Knooppunt- en randtitels/ondertitels komen uit hun respectievelijke headerkaarten.
• Eigenschappen zijn afkomstig van de knooppunt-/randeigenschapskaarten.

Knopinfo uitschakelen

Vrij eenvoudig door de eigenschap enabled in te stellen op false.

const options = {
    UI: {
        tooltip: { 
            enabled: false
        }
    }
}

Kiezen wat een tooltip weergeeft

enabled neemt ook een soort kaart of een functie, voor een grafiek die tooltips over sommige wil zweeft alleen. De soorten zijn nodes, edges en groups, de groepen Vereenvoudigen trekt. Een ontbrekende sleutel is true, dus { edges: false } behoudt knooppunten en groepen.

Een grafiek waarvan de knooppunten bij het zweven al uitgroeien tot een gedetailleerde kaart, heeft geen nut voor knopinfo voor knooppunten. maar een groep legt zichzelf alleen uit in de tooltip voordat deze wordt geopend:

const options = {
    UI: {
        tooltip: { 
            enabled: { nodes: false, edges: false, groups: true }
        }
    }
}

Bij elke hover wordt een functie gevraagd, met het element en zijn soort ('node', 'edge' of 'group'). Een functie die gooit, telt als false, en de fout wordt één keer per element geregistreerd.

const options = {
    UI: {
        tooltip: { 
            enabled: (element, kind) => kind === 'node' && element.getData().important === true
        }
    }
}

De tooltip zelf wordt alleen weggelaten als enabled false is, of bij een kaart waarop alle soorten zijn uitgeschakeld.

Kopteksttoewijzing

Vergelijkbaar met de toewijzing in de hoofdkop van de zijbalk, kunt u een toewijzing voor de koptekst van de knopinfo opgeven voor zowel knooppunten als randen.

Mapping for node and edge

const options = {
    UI: {
        tooltip: {  
            nodeHeaderMap: {
                title: node => `Node ${node.id}`,
                subtitle: node => node.data.description ?? ''
            },
            edgeHeaderMap: {
                title: edge => `Edge ${edge.from} → ${edge.to}`,
                subtitle: edge => edge.data.label ?? ''
            }
        }
    }
}

Extra inhoud

Net als bij de extra inhoud in de zijbalk, kunt u aanvullende inhoud definiëren die aan het einde van de tooltip moet worden toegevoegd.

Extra content

const options = {
    UI: {
        tooltip: { 
            renderNodeExtra: (node) => {
                const div = document.createElement('div')
                div.textContent = `Type: ${node.data.type ?? 'Unknown'}`
                return div
            },
            renderEdgeExtra: (edge) => `Weight: ${edge.data.weight ?? '0'}`
        }
    }
}

Aangepaste weergave

Ten slotte kunt u de inhoud van een tooltip volledig overschrijven met behulp van de functie render.

Custom tooltip

const options = {
    UI: {
        tooltip: {
            render: (element) => {
                const div = document.createElement('div')
                div.textContent = `Element ID: ${element.id}`
                div.style.fontWeight = 'bold'
                return div
            }
        }
    }
}

Tooltip-inhoud ophalen

render, renderNodeExtra, renderEdgeExtra, nodePropertiesMap en edgePropertiesMap kunnen allemaal async zijn. De tooltip toont een tijdelijke aanduiding while de belofte is in behandeling, ruilt de inhoud in wanneer deze wordt opgelost en herpositioneert zichzelf, zodat de volwassen tooltip op het scherm blijft.

const options = {
    UI: {
        tooltip: {
            renderNodeExtra: async (node, { signal }) => { 
                const res = await fetch(`/enrich/${node.getData().uuid}`, { signal })
                return renderChips(await res.json())
            },
        },
    },
}

De tooltip is het oppervlak waar dit het belangrijkst is, omdat het een single is hergebruikte container geopend met een vertraging van 400 ms: er is een ophaalactie gestart voor één knooppunt zou anders in een tooltip terechtkomen waarin al een andere wordt beschreven. Het kan hier niet - het zweven van een tweede knooppunt breekt de signal van de eerste render af en laat het resultaat vallen, zelfs als het als laatste wordt opgelost. Zie asynchrone inhoud voor de volledig contract en voor UI.asyncContent, waarmee de tijdelijke aanduiding wordt aangepast.

Een openstaande tooltip vastzetten

Vastzetten terwijl de inhoud nog wordt geladen is prima: de kopie vult zichzelf in wanneer het ophalen wordt opgelost, zolang het niet eerst is vervangen door een andere hover.