Semantic-UI Popup HTML Type

Last Updated : 27 Feb, 2022

Semantic UI is a front-end framework built with less and jQuery. It is used for building responsive and attractive web interfaces. In this article, we will be seeing the Semantic UI Popup HTML Type.

A Semantic UI Popup module is used to show the additional information about an element. An HTML type popup can specify HTML code to be used as the content of the popup. The HTML content can be specified as the value of the data-html attribute of the popup module.

Semantic-UI Popup HTML Type Attributes:

data-html: This attribute holds the things in HTML code that you want to display on hover on an element as a popup

Syntax:

<div class="ui card" data-html="HTML-Code-Here">
    ...
</div>

Example 1: The below example shows how to add a rating module as HTML content of the popup.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Popup HTML Type</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  
    <style> 
        .ui.container { 
            text-align: center; 
        } 
  
        h3#subheading { 
            margin-top: 0px; 
            margin-bottom: 30px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <div> 
            <h1 style="color: green">GeeksforGeeks</h1> 
            <h3 id="subheading"> 
              Semantic UI - Popup HTML Type 
            </h3> 
        </div> 
  
        <div class="ui button" 
             data-html="<div class='ui star rating'> 
                <i class='active icon'></i> 
                <i class='active icon'></i> 
                <i class='active icon'></i> 
                <i class='active icon'></i> 
                <i class='active icon'></i> 
            </div>" data-position="bottom center"> 
            Hover to see rating. 
        </div> 
    </div> 
  
    <script> 
        $(".ui.button").popup(); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Popup HTML Type

Example 2: The example below is the use of an image as the popup content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Popup HTML Type</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  
    <style> 
        .ui.container { 
            text-align: center; 
        } 
  
        h3#subheading { 
            margin-top: 0px; 
            margin-bottom: 30px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <div> 
            <h1 style="color: green">GeeksforGeeks</h1> 
            <h3 id="subheading"> 
              Semantic UI - Popup HTML Type 
            </h3> 
        </div> 
  
        <div class="ui button" 
             data-position="bottom center"
             data-html='<img height="50"
            width="50" 
src="https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">'> 
            Hover to see the image as popup. 
        </div> 
    </div> 
  
    <script> 
        $(".ui.button").popup(); 
    </script> 
</body> 
  
</html>