Tooltip
Easily create tooltip helper text throughout your site, with this handly, little block. Our block started as a stripped down version of Bootstrap's Tooltips, which was originally inspired by Tipsy.
The required JavaScript is already implemented for you. To get a tooltip working you just need to create a trigger element with class fs-tooltip-trigger, which your tooltip will be attached to. The tooltip text will be pulled from the title attribute of the element.
Hover On Me!
Data Attributes
Even though the JavaScript is setup for you with .fs-tooltip-trigger elements, we've included some optional data-* attributes you can add to customize some of the tooltip settings. To utilize them, just add them into your .fs-tooltip-trigger element.
| Data Attribute | Type | Default | Description |
|---|---|---|---|
data-container |
String | False | false |
Optional. Appends the tooltip to a specific element. By default tooltip will be appended to the original trigger element, but this can cause issues in more complicated layouts. For example, using body as the container can solve a lot of these problems. |
data-placement |
String | top |
Optional. Determines placement of tooltip, relative to the original trigger element. This can be top or bottom. |
data-title |
String | None | Optional. Text for tooltip. This is useful when don't want the tooltip to pull from a link's title attribute, or you're using an HTML element for the trigger which doesn't have a title attribute. |
For example, let's say we want the tooltip to be positioned at the bottom of the trigger, instead of the top. Just add data-placement="bottom" to your trigger element.
Hover On Me!
Or, let's say you don't want the tooltip taken from a title attribute; instead, you can use data-title.
Hover On Me!
Note: The data-title attribute will always override the title attribute, if present. For example, maybe you want a link to have a certain title for SEO purposes, then you could use data-title to designate specifically the tooltip text.
CSS Customization
The color of the tooltips cooresponds to the secondary color of the branding colors. If you're not compiling and adjusting Sass variables for your project, here's an example of how you can change the color of tooltips with basic CSS.
.fs-tooltip .tooltip-inner {
background-color: #000;
color: #fff;
}
.fs-tooltip.top .tooltip-arrow {
border-top-color: #000;
}
.fs-tooltip.bottom .tooltip-arrow {
border-bottom-color: #000;
}