Tooltip

This is the Studyportals implementation of tooltips as defined in the design system. More information can be found in the Studyportals StyleGuide.

Tooltip can be implemented as a DLL dependency.

Table of Contents

• Setup & commands
• Tooltip types
• Tooltip configuration
• Tooltip styling

Setup & commands

The following commands can be used to setup and run a local environment for developing the tooltip component. Also, we're using husky to run unit tests before a git push is done. This could be by-passed (if absolutely necessary) by running git push --no-verify.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# build for production with minification
npm run build

# run linter
npm run lint
npm run lint:fix # with fix

# run unit tests
npm run unit

Tooltip types

There are two variations of the tooltip component your application can use, these are called ContextualTooltip and GuidanceTooltip. While they are a bit different in their purpose, they are largely the same in the way they are implemented in your code. The only differences are that GuidanceTooltip works with a click interaction instead of hover interactions and has an additional configuration option to disable click interactions on the element it's bound to.

const simple = new ContextualTooltip({
	element: HTMLElement,
	content: HTMLElement | string,
	position?: Position
})

const complex = new GuidanceTooltip({
	element: HTMLElement,
	content: HTMLElement | string,
	position?: Position,
	disableClick?: boolean,
	onClose?: Function
})

Tooltip configuration

|Property|Type|Description| |--------|----|-----------| |element|HTMLElement|The element which the tooltip will be bound to.| |content|HTMLElement or string|The content of the tooltip.| |position (optional)|Position (bottom or top)|The vertical position of the tooltip. (defaults to top)| |disableClick (optional)|boolean|Disables click listener on element the tooltip is bound to.| |onClose (optional)|Function|A callback for when a user dismisses the tooltip with the close button.|

Tooltip styling

When using Tooltip in your code, you should also make sure the default Tooltip styling is included. This can be done by importing it like so:

@import '~@studyportals/tooltip/dist/tooltip.css';