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. Tooltip is a very common feature in modern websites.
Note: You must-have foundation CSS downloaded into your system from the official website of Foundation CSS.
Foundation CSS tooltip attributes:
- data-tooltip: This attribute tells the browser that the element in which it is mentioned is a tooltip.
- title: This attribute contains the value that will be shown inside the tooltip (i.e. it is basically the tip text) when the user hovers over the particular element.
Syntax:
<span data-tooltip tabindex="1" title="...">...</span>
Example: The following code demonstrates the simple tooltip. The working folder should have the downloaded "Foundation-Sites-CSS" folder and needed pre-compiled files.
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href=
"Foundation-Sites-CSS/css/foundation.css">
<link rel="stylesheet" href=
"Foundation-Sites_CSS/css/app.css">
</head>
<body>
<h1>Foundation CSS tooltip</h1>
<span data-tooltip tabindex="1"
title="Tooltip">Hover over me
</span>
<script src=
"Foundation-Sites-CSS/js/vendor/jquery.js">
</script>
<script src=
"https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<script src=
"https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
</script>
<script src=
"Foundation-Sites-CSS/js/vendor/foundation.js">
</script>
<script src="Foundation-Sites-CSS/js/app.js"></script>
</body>
</html>
Output:
simple tooltip
Positioning of Tooltip: The class attribute helps us to position the tooltip in a different position.
Tooltip position classes:
- top: This class is used to set the tooltip at the top.
- bottom: This class is used to set the tooltip at the bottom.
- left: This class is used to set the tooltip at the left.
- right: This class is used to set the tooltip at the right
Syntax:
<span class="top" data-tooltip tabindex="1" title="...">...</span>
Example: The following code displays the position of the tooltip to the right. The developer can make changes according to the need. In the below code, we assigned a tooltip to the "Hover over me" text which will appear on the right.
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Sites</title>
<link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
<link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
<script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
<script src="Foundation-Sites-CSS/js/app.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h1>Foundation CSS tooltip</h1>
<span data-tooltip style="margin:5em" class="right"
tabindex="1" title="Tooltip">Hover over me </span>
</body>
</html>
Output:
Explicit Positioning of Tooltip and its Data: We can position the tooltip and the tip using the “data-position” and the “data-alignment” attribute. The “data-alignment” helps us to align the text inside the tooltip in a different position.
Foundation CSS attributes:
- data-position: This attribute helps us to position the tooltip in different directions of the element ( top, right, left, or bottom ) according to the mentioned value.
- data-alignment: This attribute helps to align the text inside the tooltip (i.e the tip) like aligning to left, right, or center according to the given value.
Syntax:
<button class="button" type="button" data-tooltip tabindex="1"
title="..." data-position="right" data-alignment="right">
....
</button>
Example 1: The tooltip is positioned at the bottom using the "data-position" attribute set to "bottom". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. We have created three buttons with tooltip at the bottom and each of their aligned to different positions respectively.
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
<link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
<script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src=
"https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
</script>
<script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
<script src="Foundation-Sites-CSS/js/app.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h1>Foundation CSS tooltip</h1>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="bottom" data-alignment="left">
Bottom Left
</button>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="bottom" data-alignment="center">
Bottom Center
</button>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="bottom" data-alignment="right">
Bottom Right
</button>
</body>
</html>
Output:
Example 2: The tooltip is positioned at the top using the "data-position" attribute set to "top". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. In the below code example, we have created three buttons with their tooltips at the top and aligned to different positions respectively.
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation CSS Sites</title>
<link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
<link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
<script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src=
"https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
</script>
<script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
<script src="Foundation-Sites-CSS/js/app.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h1>Foundation CSS tooltip</h1>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="top" data-alignment="left">
Top Left
</button>
<button style="margin: 8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="top" data-alignment="center">
Top Center
</button>
<button style="margin: 8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="top" data-alignment="right">
Top Right
</button>
</body>
</html>
Output:
Example 3: The tooltip is positioned in the left using the "data-position" attribute set to "left". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. In the below code example, we have created three buttons with tooltip in the left and each at different positions respectively.
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation CSS Sites</title>
<link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
<link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
<script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
</script>
<script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
<script src="Foundation-Sites-CSS/js/app.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h1>Foundation CSS tooltip</h1>
<button style="margin: 12em;" class="button" type="button"
data-tooltip tabindex="1"
title="Fancy word for a beetle." data-position="left"
data-alignment="top">
Left Top
</button>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="left" data-alignment="center">
Left Center
</button>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="left" data-alignment="bottom">
Left Bottom
</button>
</body>
</html>
Output:
Example 4: The tooltip is positioned in the right using the "data-position" attribute set to "right". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. In the below code example, we have created three buttons with tooltip in the left and each at different positions respectively.
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation CSS Sites</title>
<link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
<link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
<script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
<script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
<script src="Foundation-Sites-CSS/js/app.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Foundation CSS Tooltip</h2>
<button style="margin: 8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="right" data-alignment="top">
Right Top
</button>
<button style="margin:8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="right" data-alignment="center">
Right Center
</button>
<button style="margin: 8em;" class="button" type="button"
data-tooltip tabindex="1" title="Fancy word for a beetle."
data-position="right" data-alignment="bottom">
Right Bottom
</button>
</body>
</html>
Output:
Note: In the article, we have used the tooltip inside the span or button elements. But we can use the tooltip inside others elements too. It is not restricted to certain elements.
Reference: https://get.foundation/sites/docs/tooltip.html
Similar Reads
Foundation CSS Tutorial Foundation CSS is an open-source, responsive front-end framework developed by ZURB in September 2011. It’s a powerful tool that simplifies the creation of visually appealing responsive websites, apps, and emails that function seamlessly on any device. Renowned companies such as Facebook, eBay, Mozil
6 min read
Foundation CSS Introduction A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is
3 min read
Foundation Setup
Foundation CSS Global StylesFoundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like boot
3 min read
Foundation CSS Global Style ColorsFoundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like boot
3 min read
Foundation CSS Flexbox ModeFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
8 min read
Foundation CSS JavaScript Installation & InitializationFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
4 min read
Foundation CSS Default Media QueriesFoundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on SaaS-like bootstrap.
4 min read
Foundation CSS Setup Complete ReferenceFoundation CSS Setup includes Default Media Queries that include media features such as width, height, color, and display the content as per the specified screen resolution and Global Style Colors is the default color palette made available for use by Foundation CSS. Complete list of Foundation CSS
2 min read
Foundation Containers
Foundation CSS AccordionFoundation 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, M
6 min read
Foundation CSS CalloutFoundation 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, M
2 min read
Foundation CSS CardFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. One such useful component which is used in modern websi
4 min read
Foundation CSS DropdownFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
4 min read
Foundation CSS Media ObjectFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. It has numerou
6 min read
Foundation CSS RevealFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
3 min read
Foundation CSS TablesFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
5 min read
Foundation CSS TabsFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
3 min read
Foundation CSS Responsive Accordion TabsFoundation CSS is a front-end framework used for responsive websites, apps, and emails for any device. It also has many front-end templates like Bootstrap, Semantic UI, and other Front-end frameworks. It is flexible, readable and it is completely customizable. Top tech giants like Adobe, Amazon, Cis
6 min read
Foundation CSS Containers Complete ReferenceFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Container contains features like creating a simple modal, nested model, title
3 min read
Foundation Navigation
Foundation CSS MenuFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Foundation CSS Dropdown MenuFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
3 min read
Foundation CSS Drilldown MenuFoundation 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, M
3 min read
Foundation CSS Accordion MenuFoundation CSS Accordion Menu is used to convert the basic vertical menu into an expandable accordion menu. To convert the menu into an accordion menu the data-accordion-menu attribute is used. In this article, we will discuss Foundation CSS Accordion Menu. Foundation CSS Accordion Menu Class:accord
2 min read
Foundation CSS Top BarFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mo
4 min read
Foundation CSS Responsive NavigationFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
4 min read
Foundation CSS MagellanFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
4 min read
Foundation CSS PaginationFoundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass
3 min read
Foundation CSS BreadcrumbsFoundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. In this article, we will discuss the Breadcrumb com
2 min read
Foundation CSS Navigation Complete ReferenceFoundation CSS Navigation is mostly used for the different behavior of cursor navigation on every element. For ex. Foundation CSS Magellan is used to jump to the given target when the link is clicked. It is used when we want to jump to some specific section directly without scrolling down the webpag
3 min read
Foundation Typography
Foundation CSS Base TypographyFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
4 min read
Foundation CSS Typography HelpersFoundation CSS is one of the most popular front-end frameworks used by developers to design the website. It has several useful components to make the website look much more professional and user-friendly. One such component is the Typography helper. In every website, typography is an essential thing
5 min read
Foundation CSS Typography Complete ReferenceFoundation CSS Typography facilitates the clean, simple default style, with attractive styling to the basic typographical elements, that enhance the readability. It can be defined for the headings, paragraphs, lists, other inline components, etc, that helps to create an appealing style for the eleme
2 min read
Foundation CSS General Complete Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS General use to manage general things like form label Positioning, and upload
2 min read
Foundation CSS Kitchen Sink Complete Reference Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Grid is used to make responsive layout designs both for web apps as well as mobile apps. Complete list of Foundation CSS Kitchen Sink are below: Foundation CSS Kitchen Sink Foundat
2 min read
Foundation Controls
Foundation CSS Button GroupFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
5 min read
Foundation CSS Close ButtonFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
3 min read
Foundation CSS SliderFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
3 min read
Foundation CSS SwitchFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
5 min read
Foundation CSS Controls Complete ReferenceFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Controls use to create different types of switches, buttons, sliders, and tra
2 min read
Foundation Media
Foundation CSS BadgeFoundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. It is utilized by many groups including Facebook, e
2 min read
Foundation CSS Responsive EmbedFoundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mo
2 min read
Foundation CSS LabelFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Foundation CSS OrbitFoundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
4 min read
Foundation CSS Progress BarFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
3 min read
Foundation CSS ThumbnailFoundation 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 that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Foundation CSS TooltipFoundation 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, M
6 min read
Foundation CSS Media Complete ReferenceFoundation CSS Media contains lots of features to make pretty pages and focus on little things like a tooltip, badge coloring, badge icons, label icons, etc. to make a more attractive page. Complete list Foundation CSS Media are listed below: Foundation CSS Badge Foundation CSS Badge ColoringFoundat
2 min read