Foundation CSS Tooltip Clicking
Last Updated :
14 Mar, 2022
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
A Tooltip is a small text or sometimes a word that appears when the user moves the mouse over a particular word or a particular button or control in the website. Foundation CSS has multiple tooltip variations such as Tooltip top, Tooltip clicking, Tooltip left, and Tooltip Right. In this article, we will learn about Tooltip Clicking.
By default, clicking on a tooltip will leave it open until you click somewhere else. But sometimes we might need the tooltip to be visible only when it is being hovered. To disable the tooltip open until you click elsewhere in the Foundation CSS, we use the data-click-open attribute and set it to “false”. The data-click-open is by default set to true.
Foundation CSS Tooltip Clicking Attribute:
- data-click-open: It is a boolean parameter that is by default true, if set to false it will make the tooltip disappear as soon as we stop hovering on the element.
Syntax:
<span data-tooltip data-click-open="false" tabindex="1" title="...">...</span>
Example 1: This example demonstrates the Tooltip Clicking variation in the foundation CSS.
HTML
<!doctype html>
<html>
<head>
<title>Foundation Sites</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 100px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h1>Foundation CSS Clicking tooltip</h1>
<span data-tooltip class="has-tip"
data-click-open="false"
tabindex="1" title="Clicking Tip">
Geeksforgeeks
</span>
is a Computer Science portal for geeks.
<span data-tooltip class="has-tip"
data-click-open="false" tabindex="1"
title="Clicking Tip">
Geeksforgeeks
</span>
contains well written, well thought and
well explained computer science and
programming articles.
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Output
Example 2: This example demonstrates the Tooltip Clicking variation and its comparison with non-clicking in the foundation CSS.
HTML
<!doctype html>
<html>
<head>
<title>Foundation Sites</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 100px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h1>Foundation CSS Clicking tooltip</h1>
<span data-tooltip class="has-tip"
data-click-open="true" tabindex="1"
title="Non Clicking Tip">
This tooltip will stay visible
till clicked somewhere else.
</span><br />
<span data-tooltip class="has-tip"
data-click-open="false" tabindex="1"
title="Clicking Tip">
This tooltip will only be
visible till it is hovered on.
</span>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Output
Reference: https://get.foundation/sites/docs/tooltip.html#tooltip-clicking
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...