Mixed Entity Demo

Gene and chemical tooltip modules can coexist on the same page. Hover, focus, or activate the dotted-underlined entities below.

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

HTML Pattern

<p>
  <span class="gene-tooltip" data-species="human">TP53</span>
  is involved in cellular stress responses that may be relevant when interpreting
  compounds such as
  <span class="chemical-tooltip" data-query="2336" data-scope="pubchem">benzo[a]pyrene</span>.
</p>

Initialization

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

const cleanupGenes = GeneTooltip.init({ selector: '.gene-tooltip', triggerStyle: 'dotted' });
const cleanupChemicals = ChemicalTooltip.init({ selector: '.chemical-tooltip', triggerStyle: 'dotted' });