Skip to content

Migrating to v2

Bio Tooltips v2 replaces its archived Tippy.js foundation with an owned tooltip controller and @floating-ui/dom positioning. Data providers, rendered biological content, themes, dimensions, caching, prefetch, timing, and the cleanup function returned by init() remain available.

Configuration

Rename the option bags and translate the supported fields:

v1v2
tippyOptionstooltipOptions
nestedTippyOptionsnestedTooltipOptions
placementplacement
delay: [show, hide]showDelay, hideDelay
duration: [show, hide]showDuration, hideDuration
zIndexzIndex
appendToappendTo
Popper strategystrategy
preventOverflow.options.paddingviewportPadding
flip.options.fallbackPlacementsfallbackPlacements
ts
GeneTooltip.init({
  tooltipOptions: {
    placement: 'right',
    fallbackPlacements: ['left', 'bottom', 'top'],
    showDelay: 100,
    hideDelay: 50,
    viewportPadding: 8
  }
});

For most-space placement, use the discriminated automatic form:

ts
GeneTooltip.init({
  tooltipOptions: {
    placement: 'auto',
    allowedPlacements: ['top', 'right', 'bottom', 'left']
  }
});

Arbitrary Tippy lifecycle hooks, plugins, trigger strings, animations, and raw Popper modifiers are not accepted. Bio Tooltips owns hover, focus, touch, interactive traversal, pinning, nested tooltip, reduced-motion, and cleanup behavior. Structured lifecycle diagnostics remain available through onTiming.

CSS Selectors

Replace custom Tippy selectors with the owned shell selectors:

v1v2
[data-tippy-root][data-gt-tooltip-root]
.tippy-box.gt-tooltip-box
.tippy-content.gt-tooltip-content
.tippy-arrow.gt-tooltip-arrow

The existing theme names and --gt-* customization variables remain supported. Import bio-tooltips/style.css exactly once as before.