Bio Tooltips

Appearance

Styling & Theming ​

Import the shared stylesheet once:

ts
import 'bio-tooltips/style.css';

The stylesheet includes the owned Bio Tooltips shell, layout rules, module section styling, themes, and CSS variables.

Tooltip Trigger Affordance ​

Trigger styling is opt-in and defaults to none, so existing pages keep their typography. Choose dotted or solid underline, bold type, or combine bold with one underline style:

ts
GeneTooltip.init({ triggerStyle: ['dotted', 'bold'] });
ChemicalTooltip.init({ triggerStyle: 'solid' });

Available presets are 'dotted', 'solid', and 'bold'; use 'none' to leave triggers unchanged. Dotted and solid underline cannot be combined. Styling is applied only while a trigger is initialized, and cleanup restores any existing trigger-style attributes. The stylesheet uses --gt-trigger-decoration-color for underline color and otherwise inherits the text color.

All live docs examples use a dotted underline by default. Set triggerStyle: 'none' in an example config to compare the unstyled appearance.

For a browser build, load the stylesheet from a pinned package version:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bio-tooltips@2.3.2/dist/bio-tooltips.css">

Themes ​

ts
GeneTooltip.init({
  theme: 'auto'
});

Supported theme values include auto, light, dark, material, translucent, and light-border.

Theme Examples ​

Each theme is shown with both tooltip modules so you can compare the shared visual treatment across different content.

Auto ​

Gene: TP53

Chemical: aspirin

Light ​

Gene: TP53

Chemical: aspirin

Dark ​

Gene: TP53

Chemical: aspirin

Material ​

Gene: TP53

Chemical: aspirin

Translucent ​

Gene: TP53

Chemical: aspirin

Light Border ​

Gene: TP53

Chemical: aspirin

Section Variants ​

Tooltips use filled, rounded section cards by default. Use the shared sectionVariant option for a flatter layout with simple dividers:

ts
GeneTooltip.init({
  sectionVariant: 'dividers'
});

Supported values are cards and dividers. The divider variant keeps the same content, collapse behavior, and theme colors while replacing card backgrounds with separators. To customize it further, target [data-section-variant='dividers'] in application CSS and use the existing theme variables.

Section Variant Examples ​

Cards ​

Gene: TP53

Chemical: aspirin

Dividers ​

Gene: TP53

Chemical: aspirin

CSS Variables ​

Override variables in application CSS:

css
:root {
  --gt-color-primary: #2563eb;
}

The MyGene transcript control also exposes focused override hooks. Its opened picker uses these values in browsers that support customizable native selects; other browsers continue to use their operating-system picker.

css
.gt-tooltip-box {
  --gt-transcript-selector-background: var(--gt-background-color-base);
  --gt-transcript-selector-picker-background: var(--gt-background-color-base);
  --gt-transcript-selector-border-color: var(--gt-border-color);
  --gt-transcript-selector-option-hover: color-mix(
    in srgb,
    var(--gt-accent-color) 12%,
    var(--gt-background-color-base)
  );
  --gt-transcript-selector-option-selected: color-mix(
    in srgb,
    var(--gt-accent-color) 22%,
    var(--gt-background-color-base)
  );
  --gt-transcript-selector-picker-shadow: 0 8px 20px rgb(0 0 0 / 20%);
}

Applications can also target .gene-tooltip-transcript-selector and its ::picker(select) directly when more control is needed.

Tooltip Shell Selectors ​

Bio Tooltips owns its rendered shell. The stable selectors are [data-gt-tooltip-root], .gt-tooltip-box, .gt-tooltip-content, and .gt-tooltip-arrow. Applications migrating from v1 should replace the old Tippy selectors as described in Migrating to v2.

Dimensions ​

Use tooltipWidth, tooltipHeight, and constrainToViewport for sizing behavior. These options are shared by all tooltip modules.