Tooltip
Tooltip component pack for Seed
Install
npm install seed-tooltip --save
Dependencies
Bootstrap
Javascript
This component’s interactions are powered by Bootstrap. Refer to their tooltip documentation for Javascript usage.
CSS
This component does not require any of Bootstrap’s CSS for style. In fact, it is recommended that Bootstrap’s CSS are omitted for seed-tooltip to be styled properly.
Class names
In the markup examples (below), you will that class names don’t follow the ITCSS naming scheme. This is because Boostrap requires specific class names for their tooltip components.
Example
Four options are available: top, right, bottom, and left aligned.
<button type="button" class="c-button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="c-button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="c-button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="c-button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>Configurations
Below are the default Sass configuration variables for seed-tooltip. The variables can be found in the pack’s _config.scss file.
seed-tooltip/_config.scss// Namespaces
$seed-tooltip-namespace: "tooltip" !default;
$seed-tooltip-arrow-namespace: "tooltip-arrow" !default;
$seed-tooltip-inner-namespace: "tooltip-inner" !default;
// Configs
$seed-tooltip-font-size: 12px !default;
$seed-tooltip-margin-offset: -3px !default;
$seed-tooltip-line-height: 1.5 !default;
$seed-tooltip-z-index: 1070 !default;
// Config: Inner
$seed-tooltip-background-color: #000 !default;
$seed-tooltip-border-radius: 4px !default;
$seed-tooltip-padding: 3px 8px !default;
$seed-tooltip-max-width: 200px !default;
$seed-tooltip-text-color: #fff !default;
// Config: Arrow
$seed-tooltip-arrow-size: 5px !default;