---
title: Tooltip
description: Tooltips? More like Cooltips. But really though, tooltips are nifty for displaying extended information for a term or action on a page.
video: 'PJMYScItyP4'
sass: scss/components/_tooltip.scss
js: js/foundation.tooltip.js
---
## Basic Tooltip
By default, a tooltip appears below the defined term on hover.
```html_example
The scarabaeus hung quite
clear of any branches, and, if allowed to fall, would have fallen at our feet.
```
---
## Tooltip Top
To get a tip-top top tooltip (lol), just add the class `.top` to the `` element.
```html_example
The scarabaeus
hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.
```
---
## Tooltip clicking
By default, clicking on a tooltip will leave it open until you click somewhere else. However, you can disable that by adding `data-click-open="false"`
```html_example
this
tooltip will stay open
while
this one will only be open when hovered
```
---
## Tooltip Right and Left
You can also position the tooltips to the right and left of the word by adding the classes `.right` or `.left` to the `` element.
When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.
```html_example
When he was dressed he went down the hall into the
kitchen.
The table was almost hidden beneath all Dudley's birthday presents. It looked as though
Dudley
had gotten the new computer he wanted, not to mention the second television and the racing bike.
```
---
## Explicit Positioning
New in v6.4: Heads up! This explicit positioning model is a new feature in v6.4.
Now with tooltips you can define both positions for the tip. These tooltips have a fully explicit positioning model through which you can use both `data-position` and `data-alignment` to define both positions of the box.
These dropdowns sets various positioning and alignments. Valid positions are left/right/top/bottom. Valid alignments are left/right/top/bottom/center. Left align means left sides should line up. Right align means right sides should line up. Center align means centers should line up.
#### Top and Bottom positioned
```html
```
Watch this part in video
