Semantic-UI Popup Pre-Existing Type

Last Updated : 24 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements.

A Popup displays extra facts about the element to the user when he/she hovers over it. Semantic UI provides us with a styled popup. Let’s have a look at various Popup Pre-Existing Type Classes.

Semantic UI Popup Pre-Existing Type Class:

popup: Creates a standard popup.

Syntax:

<div class="ui popup">
    ...
</div>

Example 1: In the below example, we have created a standard Pre-Existing Popup Type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Popup Pre Existing Type</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
  
    <script src= 
 "https://code.jquery.com/jquery-3.1.1.min.js"
          integrity= 
 "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> 
    </script> 
  
    <script src= 
  "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <h2 class="ui green header">GeeksforGeeks</h2> 
        <h4>Semantic UI Pre Existing Type</h4> 
        <hr> 
        <br /> 
        <div class="ui button" data-position="bottom center"> 
            Display a pre-existing popup 
        </div> 
        <div class="ui popup"> 
            I am a pre-existing popup 
        </div> 
    </div> 
  
    <script> 
        $('.button').popup() 
    </script> 
</body> 
</html>

Output:

Pre-existing popup

Example 2: In the below example, we have created a fluid pre-existing popup that takes up the entire width of the container.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Popup Pre Existing Type</title> 
    <link href= 
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
  
    <script src= 
 "https://code.jquery.com/jquery-3.1.1.min.js"
          integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> 
   </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <h2 class="ui green header">GeeksforGeeks</h2> 
        <h4>Semantic UI Pre Existing Type</h4> 
        <hr> 
        <br /> 
        <div class="ui button" data-position="bottom center"> 
            Display a pre-existing popup 
        </div> 
        <div class="ui fluid popup"> 
            <h3 class="ui green header">Pre-Existing</h3> 
            <p>I am a pre-existing popup</p> 
        </div> 
    </div> 
  
    <script> 
        $('.button').popup() 
    </script> 
</body> 
</html>