Primer CSS Tooltip Direction
Last Updated :
08 Apr, 2022
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS Tooltips are used to provide interactive textual hints to the user about the element when the mouse pointer moves over or is in focus. It is, by default, is hidden. The Tooltip Direction can be specified using the north, south, east, and west directions.
Primer CSS Tooltip Direction Class:
- tooltipped-n: This class is used to set the direction of the tooltip to the north of the element.
- tooltipped-s: This class is used to set the direction of the tooltip to the south of the element.
- tooltipped-e: This class is used to set the direction of the tooltip to the east of the element.
- tooltipped-w: This class is used to set the direction of the tooltip to the west of the element.
- tooltipped-nw: This class is used to set the direction of the tooltip to the northwest of the element.
- tooltipped-ne: This class is used to set the direction of the tooltip to the northeast of the element.
- tooltipped-sw: This class is used to set the direction of the tooltip to the southwest of the element.
- tooltipped-se: This class is used to set the direction of the tooltip to the southeast of the element.
Syntax:
<element class="tooltipped tooltipped-n border">
Content
</element>
Example 1: This example displays the implementation of the tooltip direction classes to set the direction of the tooltips in Primer CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Tooltip Direction - Primer CSS</title>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h2>GeeksforGeeks</h2>
<h4>Primer CSS - Tooltip Direction</h4>
</div>
<div class="d-flex flex-justify-center mt-5 flex-wrap">
<button type="button"
class="tooltipped tooltipped-n m-2 p-2 border"
aria-label="Tooltip to the North.">
Tooltip to the North
</button>
<button type="button"
class="tooltipped tooltipped-s m-2 p-2 border"
aria-label="Tooltip to the South.">
Tooltip to the South
</button>
<button type="button"
class="tooltipped tooltipped-e m-2 p-2 border"
aria-label="Tooltip to the East.">
Tooltip to the East
</button>
<button type="button"
class="tooltipped tooltipped-w m-2 p-2 border"
aria-label="Tooltip to the West.">
Tooltip to the West
</button>
<button type="button"
class="tooltipped tooltipped-nw m-2 p-2 border"
aria-label="Tooltip to the NorthWest.">
Tooltip to the NorthWest
</button>
<button type="button"
class="tooltipped tooltipped-ne m-2 p-2 border"
aria-label="Tooltip to the NorthEast.">
Tooltip to the NorthEast
</button>
<button type="button"
class="tooltipped tooltipped-sw m-2 p-2 border"
aria-label="Tooltip to the SouthWest.">
Tooltip to the SouthWest
</button>
<button type="button"
class="tooltipped tooltipped-se m-2 p-2 border"
aria-label="Tooltip to the SouthEast.">
Tooltip to the SouthEast
</button>
</div>
</body>
</html>
Output:
Primer CSS Tooltip DirectionExample 2: This example displays the implementation of the tooltip direction class with a tooltipped-no-delay class to remove the delay in the opening of the tooltip.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Tooltip Direction - Primer CSS</title>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h2>GeeksforGeeks</h2>
<h4>Primer CSS - Tooltip Direction with no delay</h4> </div>
<div class="d-flex flex-justify-center mt-5 flex-wrap">
<button type="button"
class="tooltipped tooltipped-n
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the North.">
Tooltip to the North
</button>
<button type="button"
class="tooltipped tooltipped-s
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the South.">
Tooltip to the South
</button>
<button type="button"
class="tooltipped tooltipped-e
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the East.">
Tooltip to the East
</button>
<button type="button"
class="tooltipped tooltipped-w
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the West.">
Tooltip to the West
</button>
<button type="button"
class="tooltipped tooltipped-nw
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the NorthWest.">
Tooltip to the NorthWest
</button>
<button type="button"
class="tooltipped tooltipped-ne
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the NorthEast.">
Tooltip to the NorthEast
</button>
<button type="button"
class="tooltipped tooltipped-sw
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the SouthWest.">
Tooltip to the SouthWest
</button>
<button type="button"
class="tooltipped tooltipped-se
tooltipped-no-delay m-2 p-2 border"
aria-label="Tooltip to the SouthEast.">
Tooltip to the SouthEast
</button>
</div>
</body>
</html>
Output:
Primer CSS Tooltip Direction WIth No Delay
Reference: https://primer.style/css/components/tooltips#tooltip-direction
Similar Reads
CSS direction Property The direction property in CSS is all about setting the text direction within any block element. It offers two values: rtl (right to left) and ltr (left to right), giving you control over the flow of your text.Syntax: element_selector { direction: rtl|ltr|initial|inherit;} Default Value: ltr Property
2 min read
Primer CSS Tooltips with No Delay Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS Tooltips with Multiple Lines Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Foundation CSS Tooltip 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, M
6 min read
Angular PrimeNG Tooltip Positions Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Tooltip Positions in Angular PrimeNG. Angular PrimeNG To
3 min read
Primer CSS Flexbox Flex Direction Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox flex-direction is
2 min read