Skip to content
Related Articles

Related Articles

Spectre Tooltips

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jan, 2022
View Discussion
Improve Article
Save Article

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.


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

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.


<!DOCTYPE html>
    <title>SPECTRE Tooltip Class</title>
    <link rel="stylesheet"
    <link rel="stylesheet"
    <link rel="stylesheet"
        <strong>SPECTRE Tooltip Class</strong>
        <button class="btn tooltip tooltip-left" 
                data-tooltip="Left Tooltip">
            Left Tooltip
        <button class="btn tooltip tooltip-top" 
                data-tooltip="Top Tooltip">
            Top Tooltip
        <button class="btn tooltip tooltip-bottom" 
                data-tooltip="Bottom Tooltip">
            Bottom Tooltip
        <button class="btn tooltip tooltip-right" 
                data-tooltip="Right Tooltip">
            Right Tooltip


Spectre tooltips

Spectre tooltips


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!