Tooltip
A small popup label for hover or focus context. Position modifiers:--top (default), --bottom, --start,--end. In production, tooltips are created dynamically via data-ln-tooltip; the example below shows the static markup.
Static tooltip
index.htmlhtml
<div class="ln-tooltip ln-tooltip--top" style="position: relative; display: inline-block">
This is a tooltip
<div class="ln-tooltip__arrow"></div>
</div>This is a tooltip
Reference
| Class | Description | Responsive |
|---|---|---|
.ln-tooltip | Tooltip container | No |
.ln-tooltip__arrow | Directional arrow | No |
.ln-tooltip--top | Arrow on bottom (tooltip above) | No |
.ln-tooltip--bottom | Arrow on top (tooltip below) | No |
.ln-tooltip--start | Arrow on right (tooltip left) | No |
.ln-tooltip--end | Arrow on left (tooltip right) | No |