Skip to content
Related Articles

Related Articles

Semantic-UI Popup Types

Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
Improve Article
Save Article

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 types.

Semantic UI Popup Types:

  • Standard Popup: A Standard Semantic UI-styled popup. The popup data is stored in the data-content attribute.
  • Titled: Semantic UI provides us with the option of specifying a title to the popup. The popup title data is stored in the data-title attribute.
  • HTML: A popup can be styled using the HTML and various classes provided by Semantic UI. The HTML-styled popup is stored in the data-html attribute.
  • Pre-Existing: We pre-define a popup and use it on further defined elements.
  • Tooltip: We can display a popup independent of JavaScript, using the data-tooltip attribute.

Syntax:

<div class="ui" data-content="..." data-title="..." 
    data-html="..." data-tooltip="...">
      ...
</div>

Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.

Example 1: In the below example, we have created a standard popup.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup Types</title>
    <link href=
          rel="stylesheet" />
 
    <script src=
           integrity=
 "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
           crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-content="A Standard Popup">
            Hover Over me to display a popup
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>


Output:

Standard Popup

Example 2: In the below example, we have created a titled popup.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup Types</title>
    <link href=
          rel="stylesheet" />
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
     </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-title="Title"
             data-content="A Titled Popup">
            Hover Over me to display a popup
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>


Output:

Titled Popup

Example 3: In the below example, we have created a styled HTML popup.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup Types</title>
    <link href=
          rel="stylesheet" />
 
    <script src=
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-html=
            "<h3 class='ui header green'>HTML</h3>
 
<p>A HTML popup</p>
 
"
            data-variation="mini">
            Hover Over me to display a popup
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>


Output:

HTML Popup

Example 4: In the below example, we have created a pre-existing popup.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup Types</title>
    <link href=
          rel="stylesheet" />
 
    <script src=
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-position="bottom right">
            Hover Over me to display a popup
        </div>
        <div class="ui popup">
            <h3 class='ui header green'>Pre-Existing</h3>
             
<p>A Pre-existing Popup</p>
 
        </div>
    </div>
 
    <script>
        $('.button').popup()
    </script>
</body>
</html>


Output:

Pre-Existing Popup

Example 5: In the below example, we have created a tooltip popup.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Popup Types</title>
    <link href=
          rel="stylesheet" />
 
    <script src=
           integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Popup Types</h4>
        <hr>
        <br />
        <div class="ui button" data-tooltip="I am a tooltip popup"
             data-inverted="" data-position="bottom left">
            Hover Over me to display a popup
        </div>
    </div>
</body>
</html>


Output:

Tooltip popup

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!