Spectre Popovers

Last Updated : 02 Feb, 2022

The Spectre Popovers are one of the useful components in Spectre. Popovers are used in buttons or in input fields to notify the user about what the button is for or what is the input field is asking. It can also be used as a notification, like supposing the user has put the password, the popover can pop out from the input field and highlighted the wrong information provided by the user.

To create popovers you need to wrap the container with the popover class. And add a container with the popover-container next to the element. You can use the Cards component inside the popover-container.

One can add the popover-right, popover-bottom, popover-top or popover-left class to define the position. By default, the popovers appear above the element.

Spectre Popovers Class:

popover: This class is used to create a popover element. The rest of the popover classes should be wrapped inside this class.
popover-container: This class is used to create a popover container, inside this popover content are placed.
popover-right: This class is used to set the popover pop side right.
popover-bottom: This class is used to set the popover pop side bottom.
popover-top: This class is used to set the popover pop side top.
popover-left: This class is used to set the popover pop side left.

Syntax:

<div class="popover popover-class">
    ...
    <div class="popover-container">
        ...
    </div>
</div>

The below example illustrates the Spectre Popovers:

Example: In this example, we will create 4 buttons and each of the sides of the popover will be triggered using that button.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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 style="color: green">GeeksforGeeks</h1> 
        <strong>SPECTRE Popover Class</strong> 
        <br><br> 
        <div class="popover popover-right"> 
          <button class="btn btn-success"> 
              Right Popover 
          </button> 
          <div class="popover-container"> 
            <div style="background-color: green"> 
                <p class="text-large text-error"> 
                    Right Popover Class 
                </p> 
  
            </div> 
          </div> 
        </div> 
        <div class="popover popover-top"> 
          <button class="btn btn-success"> 
              Top Popover 
          </button> 
          <div class="popover-container"> 
            <div style="background-color: green"> 
                <p class="text-large text-error"> 
                    Top Popover Class 
                </p> 
  
            </div> 
          </div> 
        </div> 
        <div class="popover popover-bottom"> 
          <button class="btn btn-success"> 
              Bottom Popover 
          </button> 
          <div class="popover-container"> 
            <div style="background-color: green"> 
                <p class="text-large text-error"> 
                    Bottom Popover Class 
                </p> 
  
            </div> 
          </div> 
        </div> 
        <div class="popover popover-left"> 
          <button class="btn btn-success"> 
              Left Popover 
          </button> 
          <div class="popover-container"> 
            <div style="background-color: green"> 
                <p class="text-large text-error"> 
                    Left Popover Class 
                </p> 
  
            </div> 
          </div> 
        </div> 
    </center> 
</body> 
  
</html>