protvista-tooltip

A custom element allowing to navigate a protein/nucleic sequence.

Usage

<protvista-tooltip title="My tooltip" visible x="10" y="20">
  Content of the tooltip (in <code>html</code> too)
</protvista-tooltip>

API Reference

Properties

name: title

The title to be displayed.

name: x

The x position, in pixels, of the target of the tooltip.

name: y

The y position, in pixels, of the target of the tooltip.

name: visible

Flag denoting if the tooltip should be visible or not.

name: container

Selector to get the container of the tooltip (for edge calculations). Default to the main html element of the current document.

overridable custom properties

Override by setting new values to custom properties on the element itself

name: --z-index

z-index of the tooltip, defaults to 50000.

name: --title-color

color of the tooltip title background, defaults to black.

name: --text-color

color of the tooltip text, defaults to white.

name: --body-color

color of the tooltip body background, defaults to #616161.

name: --triangle-width

width of the triangle pointing the tooltip towards its target, in pixels, defaults to 16px.

name: --triangle-height

height of the triangle pointing the tooltip towards its target, in pixels, defaults to 10px.

name: --triangle-margin

distance of the triangle pointing the tooltip towards its target from the side of the tooltip, in pixels, defaults to 10px.

name: --vertical-distance

distance of the triangle pointing the tooltip towards its target from the side of the tooltip, in pixels, defaults to 5px.