flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Tooltips


Introduction

With CSS Framework you can make nice tooltips.


Click on the Class name to copy it.

tooltip Show Tooltip
tooltip-top Tooltip on top
tooltip-right Tooltp on the right
tooltip-bottom Tooltp on the bottom
tooltip-left Tooltp on the left

The tooltips also use their own attribute:

Click on the Class name to copy it.

data-tooltip="tooltip text" Attribute gives a text to the tooltip

Example


Tooltip =
data-tooltip="Tooltip"


Tooltip =
.tooltip + data-tooltip="Tooltip"


Tooltip =
.tooltip-top + data-tooltip="Tooltip"


.tooltip-right + data-tooltip="Tooltip" = Tooltip


.tooltip-bottom + data-tooltip="Tooltip" =
Tooltip


Tooltip = .tooltip-left + data-tooltip="Tooltip"




Example code:

<p>Data attribute only <a href="#" data-tooltip="I´m the tooltip text">Tooltip</a></p>
<p><code>.tooltip</code> <a href="#" class="tooltip" data-tooltip="I´m the tooltip text">Tooltip</a></p>
<p><code>.tooltip-top</code> <a href="#" class="tooltip-top" data-tooltip="I´m the tooltip text">Tooltip</a></p>
<p><code>.tooltip-right</code> <a href="#" class="tooltip-right" data-tooltip="I´m the tooltip text">Tooltip</a></p>
<p><code>.tooltip-bottom</code> <a href="#" class="tooltip-bottom" data-tooltip="I´m the tooltip text">Tooltip</a></p>
<p><a href="#" class="tooltip-left" data-tooltip="I´m the tooltip text">Tooltip</a> <code>.tooltip-left</code></p>
<button class="button" data-tooltip="I´m the tooltip text">Button</button><br />


© Copyright by Web Henkie
All right reserved
Webmaster