Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.
Blaze UI Tooltips is a pure CSS tooltip that is displayed over an element when the mouse or pointer has hovered over it. The tooltips are useful when the icons or buttons are confusing or display some extra message about the element’s function.
Blaze UI Tooltips Classes:
- c-tooltip: It is used to notify that the element contains a tooltip.
- c-tooltip-right: Positions the tooltip to right.
- c-tooltip-left: Positions the tooltip to left.
- c-tooltip-top: Positions the tooltip to the top.
- c-tooltip-bottom: Positions the tooltip to the bottom.
Blaze UI Tooltips Attribute:
- aria-label: This attribute contains the tooltip message.
Syntax: Create a tooltip for an element as follows:
<div class="c-tooltip c-tooltip--top"
aria-label="Welcome to GeeksforGeeks">
Hover
</div>Example 1: In the following example, we have different tooltips with different positions.
<!DOCTYPE html> <html lang="en">
<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" />
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src="node_modules/@blaze/atoms/dist/blaze-atoms.js"></script>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Tooltips</strong>
<br />
<br />
<span class="c-button c-button--warning
c-tooltip c-tooltip--left"
aria-label="Welcome to GeeksforGeeks">
Tooltip 1
</span>
<span class="c-button c-button--info
c-tooltip c-tooltip--bottom"
aria-label="Algorithms">
Tooltip 2
</span>
<span class="c-button c-button--brand
c-tooltip c-tooltip--top"
aria-label="Data Structures">
Tooltip 3
</span>
<span class="c-button c-button--success
c-tooltip c-tooltip--right"
aria-label="Java">
Tooltip 4
</span>
</center>
</div>
</body>
</html>
|
Output:
Example 2: In the following example, we will change the position of the tooltip with the help of buttons.
<!DOCTYPE html> <html lang="en">
<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" />
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src="node_modules/@blaze/atoms/dist/blaze-atoms.js"></script>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Tooltips</strong>
<br />
<br />
<button class="c-button" onclick="changePosition('c-tooltip--top')">
Top
</button>
<button class="c-button" onclick="changePosition('c-tooltip--left')">
Left
</button>
<button class="c-button" onclick="changePosition('c-tooltip--bottom')">
Bottom
</button>
<button class="c-button" onclick="changePosition('c-tooltip--right')">
Right
</button>
<br />
<br />
<span class="c-button c-button--info
c-tooltip c-tooltip--top"
aria-label="Welcome to GeeksforGeeks">
Tooltip 2
</span>
</center>
</div>
<script>
let currentPosition = 'c-tooltip--top'
function changePosition(pos) {
$('span').toggleClass(currentPosition)
currentPosition = pos
$('span').toggleClass(currentPosition)
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/tooltips/