open-index/open-npm huggingface dataset:
npm package: @studyportals/tooltip
Description: A generic tooltip component.
Author: Samurai Pizza Cats
Latest version: 3.0.0

# Tooltip

This is the Studyportals implementation of tooltips as defined in the design system. More information can be found in the [Studyportals StyleGuide](https://styleguide.studyportals.com/student/principles).

**Tooltip can be implemented as a [DLL dependency](https://knowledge-vault.studyportals.xyz/manuals/bob/asset-deduplication.html).**

## Table of Contents
- [Setup & commands](#setup--commands)
- [Tooltip types](#tooltip-types)
- [Tooltip configuration](#tooltip-configuration)
- [Tooltip styling](#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`.

```bash
# 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.

```javascript
const simple = new ContextualTooltip({
	element: HTMLElement,
	content: HTMLElement | string,
	position?: Position
})
```

```javascript
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:

```scss
@import '~@studyportals/tooltip/dist/tooltip.css';
```