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 =
< 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:
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 =
< 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:
Reference Link: https://semantic-ui.com/modules/popup.html#titled