Tooltip
Classes Information
| ClassName | Description |
|---|---|
| tooltip Base | class for tooltip |
| tooltip-top | Set position to top |
| tooltip-bottom | Set position to bottom |
| tooltip-left | Set position to left |
| tooltip-right | Set position to right |
| tooltip-primary | Set primary color |
| tooltip-secondary | Set secondary color |
| tooltip-success | Set success color |
| tooltip-error | Set error color |
| tooltip-warning | Set warning color |
| tooltip-open | Open tooltip by default |
| tooltip-click | Open tooltip on click |
Basic Usage
Example Code
html
<span class="tooltip tooltip-right" data-tooltip="Basic">
<button class="btn">Basic</button>
</span>Directions
Example Code
html
<span class="tooltip tooltip-top" data-tooltip="Top">
<button class="btn">top</button>
</span>
<span class="tooltip tooltip-bottom" data-tooltip="Bottom">
<button class="btn">bottom</button>
</span>
<span class="tooltip tooltip-left" data-tooltip="Left">
<button class="btn">left</button>
</span>
<span class="tooltip tooltip-right" data-tooltip="Right">
<button class="btn">right</button>
</span>Colors
Example Code
html
<span class="tooltip tooltip-left tooltip-primary" data-tooltip="left">
<button class="btn">primary</button>
</span>
<span class="tooltip tooltip-bottom tooltip-secondary" data-tooltip="Bottom">
<button class="btn">secondary</button>
</span>
<span class="tooltip tooltip-top tooltip-success" data-tooltip="Top">
<button class="btn">success</button>
</span>
<span class="tooltip tooltip-bottom tooltip-warning" data-tooltip="Bottom">
<button class="btn">warning</button>
</span>
<span class="tooltip tooltip-right tooltip-error" data-tooltip="Right">
<button class="btn">error</button>
</span>Open
Example Code
html
<span class="tooltip tooltip-top tooltip-success tooltip-open" data-tooltip="Top">
<button class="btn">Basic</button>
</span>On Click
Example Code
html
<span class="tooltip-click tooltip-top" data-tooltip="On Click">
<button class="btn">On Click</button>
</span>