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


Introductie

Met CSS Framework kun je leuke tooltips maken.


Klik op de Class naam om deze te kopiƫren.

tooltip Laat tooltip zien
tooltip-top Tooltip boven
tooltip-right Tooltp rechts
tooltip-bottom Tooltp onder
tooltip-left Tooltp links

De tooltips gebruiken ook hun eigen attributen:

Klik op de Class naam om deze te kopiƫren.

data-tooltip="tooltip text" Attribuut geeft een tekst aan de tooltip

Voorbeeld


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"




Voorbeeldcode:

<p>Gegevens attribuut alleen <a href="#" data-tooltip="Ik ben de tooltip tekst">Tooltip</a></p>
<p><code>.tooltip</code> <a href="#" class="tooltip" data-tooltip="Ik ben de tooltip tekst">Tooltip</a></p>
<p><code>.tooltip-top</code> <a href="#" class="tooltip-top" data-tooltip="Ik ben de tooltip tekst">Tooltip</a></p>
<p><code>.tooltip-right</code> <a href="#" class="tooltip-right" data-tooltip="Ik ben de tooltip tekst">Tooltip</a></p>
<p><code>.tooltip-bottom</code> <a href="#" class="tooltip-bottom" data-tooltip="Ik ben de tooltip tekst">Tooltip</a></p>
<p><a href="#" class="tooltip-left" data-tooltip="Ik ben de tooltip tekst">Tooltip</a> <code>.tooltip-left</code></p>
<button class="button" data-tooltip="Ik ben de tooltip tekst">Button</button><br />


© Copyright by Web Henkie
All right reserved
Webmaster