Semantic-UI Popup Pre-Existing Type

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:

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>

Output:

Reference: https://semantic-ui.com/modules/popup.html#pre-existing

Semantic-UI Popup Pre-Existing Type

Explore