<!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
>