How to create a Tooltip popup using jQuery Mobile ?

How to create a Tooltip popup using jQuery Mobile ?

Last Updated : 14 Dec, 2020

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Tooltip popup using jQuery Mobile.

Approach: Add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />

<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>

<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

We can create a tooltip by adding a theme swatch to the basic popup and use ui-content class to add popup.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src=
        "http://code.jquery.com/jquery-1.11.1.min.js">
    </script>

    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h4>
            Tooltip popup using jQuery Mobile
        </h4>

        
        <p>
            GeeksforGeeks <a href="#GFGpopup"
            data-transition="pop" data-rel="popup"
                class="my-tooltip-btn ui-btn ui-alt-icon 
                ui-nodisc-icon ui-btn-inline ui-icon-info 
                ui-btn-icon-notext"
                title="Read more...">Read more...</a>
        </p>


        <div data-role="popup" id="GFGpopup" 
            class="ui-content" data-theme="a">
            
            <p>Welcome to GeeksforGeeks</p>
        </div>
    </center>
</body>

</html>

Output:

How to create a Tooltip popup using jQuery Mobile ?

P

ppatelkap

Improve

Article Tags :

Similar Reads

How to create a Position popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a position popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to create a Transitions popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a transition popup button using jQuery Mobile. Approach: Add jQuery mobile scripts needed for your project. <link rel=â€style

How to create a Form Popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a form popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ href=â€h

How to create a Menu popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating menu popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to create a Dialog Popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Dialog popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet