Foundation CSS Tooltip

Tooltips are small, floating elements that appear when users hover over an element, providing additional information or context. Foundation CSS provides a simple way to create tooltips using built-in classes and attributes.

1. Basic Tooltip

To create a basic tooltip, add the data-tooltip attribute to the element you want to trigger the tooltip. Set the value of the attribute to the text you want to display in the tooltip.

Example markup for a basic tooltip:

<button data-tooltip="This is a tooltip">Hover over me</button>

When users hover over the button, a tooltip with the text "This is a tooltip" will appear.

2. Positioning

By default, tooltips appear above the element. You can customize the position of the tooltip by adding the data-position attribute and specifying the desired position as the attribute value.

Example markup for a tooltip positioned below the element:

<button data-tooltip="Tooltip below" data-position="bottom">Hover over me</button>

This will display the tooltip below the button.

3. Alignment

Foundation CSS allows you to align the tooltip text using the data-alignment attribute. You can set the alignment to left, center, or right.

Example markup for a centered tooltip:

<button data-tooltip="Centered tooltip" data-alignment="center">Hover over me</button>

This will center-align the text within the tooltip.

4. Styling

You can style tooltips using CSS. Foundation CSS provides default styles for tooltips, but you can override them to match your design.

Example CSS for custom tooltip styles:

.tooltip {
  background-color: #333;
  color: #fff;
}

This CSS will change the background color to dark gray and text color to white for all tooltips.

Conclusion

Foundation CSS tooltips are a useful way to provide additional information or context to users without cluttering the interface. By adding simple attributes to elements, you can quickly create tooltips with customizable positioning, alignment, and styling. Whether you need basic tooltips or more advanced customization, Foundation CSS provides the necessary tools to enhance the usability of your web applications.

Archive