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.
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Popup Titled 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 {
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:
Example 2: The example below shows the titled type popup with different width variations.
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Popup Titled 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 {
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:
Reference Link: https://semantic-ui.com/modules/popup.html#titled