What is Spectre Tooltips?

In this article, we will learn Spectre Tooltips,This free Spectre tutorial for complete beginners will help you learn Spectre from scratch.

Spectre Tooltips - ❤️Spectre Tutorials In 2024

Spectre Tooltips are quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. It provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.

To create a tooltip you need to add the tooltip class and the data-tooltip attribute, which contains the tooltip content. And by using tooltip-right, tooltip-bottom or tooltip-left class you can define the position of a tooltip. By default, the tooltip appears above the element.

Spectre tooltips:

Multiline tooltips: This is used to create a multilined tooltip the normal tooltip will try to display the data-tooltip content in a single line.

Spectre tooltips Class:

tooltip: This class is used to create tooltip element, things should be wrap inside this class belonging element.
tooltip-right: This class is used to set the tooltip pop side right.
tooltip-bottom: This class is used to set the tooltip pop side bottom.
tooltip-top: This class is used to set the tooltip pop side top.
tooltip-left: This class is used to set the tooltip pop side left.

Syntax:

<button class="btn tooltip" data-tooltip="...">
...
</button>

Example: Below example illustrate the Spectre tooltips. In this example, we will create 4 buttons and each side of the tooltips will be used in that button.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Tooltip Class</title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1>w3wiki</h1> 
        <strong>SPECTRE Tooltip Class</strong> 
        <br><br> 
        <button class="btn tooltip tooltip-left" 
                data-tooltip="Left Tooltip"> 
            Left Tooltip 
        </button> 
        <button class="btn tooltip tooltip-top" 
                data-tooltip="Top Tooltip"> 
            Top Tooltip 
        </button> 
        <button class="btn tooltip tooltip-bottom" 
                data-tooltip="Bottom Tooltip"> 
            Bottom Tooltip 
        </button> 
        <button class="btn tooltip tooltip-right" 
                data-tooltip="Right Tooltip"> 
            Right Tooltip 
        </button> 
    </center> 
</body> 
  
</html>

Output:

Spectre tooltips

Reference: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips