Open In App

Semantic-UI Popup Titled Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source UI framework that is built with CSS preprocessor less and jQuery. It comes with pre-styled and functional elements and modules that help in building great websites faster. It can also be used with other CSS frameworks like Bootstrap.

A popup module is used to show additional information to the user. In this article, we will be seeing the popup titled type. The title of a popup can be specified using the data-title attribute of the popup module. 

Semantic-UI Popup Titled Type Attribute:

  • data-title: This attribute can specify popup content with a title.

Syntax:

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

Example 1: The example below illustrates the use of the data-title attribute of the popup module to set the title a popup.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Popup Titled Type</title>
    <link rel="stylesheet" 
          href=
    <script src=
   </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
        h3 {
            margin-top: 0px;
        }
        .ui.button {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color:green">GeeksforGeeks</h1>
            <h3>Semantic UI - Progress Titled Type</h3>
        </div>
  
        <div class="ui button" 
             data-title="GeeksforGeeks"
             data-content=
            "GeeksforGeeks is a computer science portal for geeks.
            You can read article on various computer science subjects 
            like Data Structures, Algorithms, DBMS , etc.
            You can also enroll in courses to get video 
            lectures on various subjects.">
            Hover to see the popup with title.
        </div>
    </div>
  
    <script>
        $(".ui.button").popup();
    </script>
</body>
  
</html>


Output:

Semantic-UI Popup Titled Type

Semantic-UI Popup Titled Type

Example 2: The example below shows the titled type popup with different width variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Popup Titled Type</title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
        h3 {
            margin-top: 0px;
        }
        .ui.button {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color:green">GeeksforGeeks</h1>
            <h3>
              Semantic UI Progress Titled Type with Width Variation
            </h3>
        </div>
  
        <div class="ui grid">
            <div class="sixteen wide column">
                <div class="ui button" 
                     data-title="GeeksforGeeks"
                     data-content=
                    "GeeksforGeeks is a computer science portal for geeks.
                     You can read article on various computer science subjects 
                     like Data Structures, Algorithms, DBMS , etc.
                     You can also enroll in courses to get video 
                     lectures on various subjects.">
                    Hover to see the popup with title.
                </div>
            </div>
            <div class="sixteen wide column">
                <div class="ui button"
                     data-title="GeeksforGeeks" 
                     data-content=
                   "GeeksforGeeks is a computer science portal for geeks.
                    You can read article on various computer science subjects 
                    like Data Structures, Algorithms, DBMS , etc.
                    You can also enroll in courses to get video lectures 
                    on various subjects."
                     data-variation="wide">
                    Hover to see the wide popup with title.
                </div>
            </div>
            <div class="sixteen wide column">
                <div class="ui button" 
                     data-title="GeeksforGeeks"
                     data-content=
                    "GeeksforGeeks is a computer science portal for geeks.
                     You can read article on various computer science subjects 
                     like Data Structures, Algorithms, DBMS , etc.
                     You can also enroll in courses to get video lectures on
                     various subjects."
                     data-variation="very wide">
                    Hover to see the very wide popup with title.
                </div>
            </div>
        </div>
    </div>
    <script>
        $(".ui.button").popup();
    </script>
</body>
</html>


Output:

Semantic-UI Popup Titled Type

Semantic-UI Popup Titled Type

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



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads