gene-tooltips

A framework-agnostic JavaScript/TypeScript library for displaying interactive gene information tooltips.

Context

This library can be used to enrich any text within an HTML document to provide a 'glimpse' of information on a gene using the MyGene.info API, providing an immediate definition alongside links to further reading for genes of interest.

The library is similar in principle to Gene Hints, but does not require an ideogram as the 'launching point'.

Features

• Display rich tooltips based on Tippy.js for genes in any HTML file
• Framework-agnostic: works with vanilla JS, React, Vue, etc.
• Optional integration with D3.js and Ideogram
• Configure what sections of information is displayed, height/width of the tooltip, and use Tippy.js themes to style the gene-tooltips.
• Can be easily extended to show more data from the MyGene.info API

Installation

npm install gene-tooltips

Usage

At minimum, you must include the javascript code for this project (either installed via NPM or built locally). For all features, you will also need to include ideogram.js and the D3 libraries.

The file examples/index.html shows a working example - simply clone this repository, run npm install and npm run build, then open index.html in a browser.

To initialize gene tooltip object, add something like this (with configurable options) to your HTML:

<p>
  Here is a human gene: <span class="gene-tooltip" data-species="human">TP53</span>.
  And here is a mouse gene: <span class="gene-tooltip" data-species="mouse">Trp53</span>.
</p>

<script src="https://unpkg.com/gene-tooltips/dist/gene-tooltips.global.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        GeneTooltip.init({
            // Your optional configuration here
        });
    });
</script>

You can also add the class to a list of consistently delimited gene names (as long as they belong to the same species)

Documentation

Full documentation and examples are available in the docs folder or at the project site.

Contributing

Issues and pull requests are welcome. Please open a discussion if you’d like to propose a new feature or bug fix.