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