Demo Overview

Hover over the terms below to see multiple tooltip modules using the same shared engine.

Gene Tooltips

The protein encoded by TP53 is a tumor suppressor. In mice, the ortholog is Trp53. Here is one from fruit fly: dib.

Lists work too: TP53, GADD45A, BRCA1, BRCA2, RAD51, ATM, XPA, NOTAGENE

Open the dedicated gene demo

Chemical Tooltips

Common-name queries can resolve familiar compounds like aspirin, caffeine, and imatinib.

Identifier scopes work when the visible text is not a name: PubChem CID 2244 and ChEMBL ID CHEMBL25.

Open the dedicated chemical demo

Mixed Entity Demo

Gene and chemical tooltip modules can run on the same page.

TP53 is involved in cellular stress responses that may be relevant when interpreting compounds such as benzo[a]pyrene.

Open the mixed entity demo

Demo Debugging

The VitePress demo components support URL toggles for timing diagnostics:

URL parameter	Behavior
?btDebug=1	Enables tooltip timing logs in the browser console and persists the setting in local storage.
?btDebug=0	Disables persisted timing logs.
?btVisualPreload=init	Warms visual dependencies immediately after tooltip initialization.
?btVisualPreload=hover	Uses first-hover visual warmup.
?btVisualPreload=none	Disables visual warmup.
?btVisualPreload=reset	Clears the persisted demo visual preload override.

These toggles are docs-only conveniences for testing the local demos. Library users can configure the same behavior with debugTimings and visualPreload.

Code Shape

import { GeneTooltip } from 'bio-tooltips/mygene';
import { ChemicalTooltip } from 'bio-tooltips/mychem';
import 'bio-tooltips/style.css';

GeneTooltip.init({ selector: '.gene-tooltip' });
ChemicalTooltip.init({ selector: '.chemical-tooltip' });