@studyportals/tooltip

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';