## Basic Tooltip
-By default, a tooltip appears below the the definition on hover.
+By default, a tooltip appears below the defined term on hover.
```html_example
<p>
---
## Tooltip Top
-To get a tip-top top tooltip (lol), just add the class <code>top</code> the <code>span</code> tag.
+To get a tip-top top tooltip (lol), just add the class `.top` the `<span>` element.
```html_example
<p>
/// @group tooltip
////
+/// Default font weight of the defined term.
+/// @type Keyword | Number
+$has-tip-font-weight: $global-weight-bold !default;
+
+/// Default border bottom of the defined term.
+/// @type List
+$has-tip-border-bottom: dotted 1px $dark-gray !default;
+
/// Default color of the tooltip background.
/// @type Color
$tooltip-background-color: $black !default;
$tooltip-radius: $global-radius !default;
@mixin has-tip {
- border-bottom: dotted 1px $dark-gray;
- font-weight: bold;
+ border-bottom: $has-tip-border-bottom;
+ font-weight: $has-tip-font-weight;
position: relative;
display: inline-block;
cursor: help;
// 34. Tooltip
// -----------
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$has-tip-font-weight: $global-weight-bold;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
$topbar-background: $light-gray;
$topbar-link-color: $primary-color;
$topbar-input-width: 200px;
-