Open In App

Spectre Tooltips

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</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

Spectre tooltips

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



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads