JournalDev

Java, Java EE, Android, Python, Web Development Tutorials

You are here: Home » jQuery » jQuery Plugins » jQuery Popup and Tooltip Window Animation Effects

jQuery Popup and Tooltip Window Animation Effects

1 Comment

In this tutorial, we are going to discuss about a jQuery plugin for responsive and accessible modal windows and tooltips, called jQuery Popup Overlay Plugin.

Contents

jQuery Popup Overlay Features

  •  The main feature of this plugin is it can be positioned with CSS.
  • Suitable for responsive web design. It will easily adapt to any screen size and orientation.
  •  Vertical scrolling will be automatically enabled which makes it visible always.
  •  Supports navigation using keyboard. You can use tab key to navigate. 
  • It is device independent and works well on desktops, mobiles, tablets etc.
  • It is very flexible and customizable.

jQuery Popup Overlay Options

In this section, we will discuss about different options available to customize the jQuery Popup Overlay plugin. We have used many of these options in the jQuery Popup Overlay Plugin in Action section.

OptionsDefaultDescription
type‘overlay’This is used to set the pop up type to overlay or tooltip.
autoopenfalsedisplays the popup when it is initialized.
backgroundTrueEnables background cover but it is disabled for tooltips.
color‘#000’String value used to set the background color.
opacity0.5Used to set the background opacity.
horizontal‘center’The values ‘center’,’left’,’right’,’leftedge’,’rightedge’ are used to set the horizontal position.The values ‘leftedge’,’rightedge’ are available only for tooltips.
vertical‘center’The values center’,’top’,’bottom’,’topedge’,’bottomedge’ are used to,set the vertical position.The values ‘topedge’,’bottomedge’,are,available only for tooltips.
blurtrueSetting to true closes the popup when clicked outside.
transitionSets CSS transition when showing and hiding a popup
tooltipanchorSets an element to be an anchor for tooltip position.

The above table briefly describes most of the options available in jQuery Popup Overlay Plugin. You can check out the official site for more options.

jQuery Popup Overlay Methods

In this section, we will look into the jQuery Popup Overlay Plugin methods and its syntax. These methods are very useful when you deal with the popup plugin.

MethodsUsageDescription
popup(options)$(‘#popup’).popup({
background: false});		This method activates your content as a popup. It also accepts an optional options object.
popup(‘show’)$(‘#popup’).popup(‘show’);Used to open a popup.
popup(‘hide’)$(‘#popup’).popup(‘hide’);Used to hide a popup.
popup(‘toggle’)$(‘#’popup’).popup(‘toggle’);

jQuery Popup Overlay Events

In this section, we will discuss about different callback function executed when an event associated with jQuery Popup Overlay plugin is fired. We have used many of these events in the jQuery Popup Overlay Plugin in Action section.

Callback FunctionDescription
beforeopenThis function is executed before pop up is opened
onopenExecutes when the pop up starts to open.
oncloseExecutes on closing the pop up.
opentransitionendExecute after the opening CSS transition is over
closetransitionendExecute after the closing CSS transition is over

jQuery Popup Overlay in Action

In this section, we will try different examples to explore the jQuery Popup Overlay plugin.

Basic Functionality

The following example demonstrates the basic functionality of jQueryUI Popup Overlay plugin.

basic.html

Copy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic Functionality</title>

<style>
.popUpDiv{
        box-shadow: 0 0 10px rgb(0, 0, 0);
        display:none;
        margin:1em;
    }
</style>
</head>
<body>

  <!-- Add an optional button to open the popup -->
  <button class="basicDemo_open">Open popup</button>

  <!-- Add content to the popup -->
  <div id="basicDemo" class="popUpDiv" style="max-width:30em;">

    <h4>Journal Dev jQuery popUp Overlay Demo</h4>
    <p>Demonstrates the basic functionality of jQuery PopUp Overlay.</p>
    <!-- Add an optional button to close the popup -->
    <button class="basicDemo_close">Close</button>

  </div>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#basicDemo').popup();

    });
  </script>

</body>
</html>

You will see the following output in your browser.

ToolTip Example

The following example demonstrates the tooltip type option of the jQuery popup overlay plugin.

tooltip.html

Copy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip Example</title>

<style>
.popUpDiv{
        box-shadow: 0 0 10px rgb(0, 0, 0);
        display:none;
        margin:1em;
    }
</style>
</head>
<body>

  <!-- Add an optional button to open the popup -->
  <button class="tooltip_open">JournalDev ToolTip Example</button>

  <!-- Add content to the popup -->
  <div id="tooltip" class="popUpDiv" style="max-width:30em;">
    <a href="#" class="tooltip_close" style="float:right;padding:0 0.4em;"></a>
    <h4>ToolTip Example</h4>
    <p>Demonstrates the tooltip animation of jQuery popup overlay plugin</p>
    <!-- Add an optional button to close the popup -->
    <button class="tooltip_close">Close</button>

  </div>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#tooltip').popup({
        type: 'tooltip',
        vertical: 'top',
        transition: '0.5s all 0.1s',
        tooltipanchor: $('#tooltip_open')
    });

    });
  </script>

</body>
</html>

You will see the following output in your browser.

Active BackGround Example

The following example demonstrates the popup with active background.

activebackground.html

Copy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active BackGround Example</title>

<style>
.popUpDiv{
        box-shadow: 0 0 10px rgb(0, 0, 0);
        display:none;
        margin:1em;
    }
</style>
</head>
<body>

  <div>
    <p>You can click on this text and won't close the popup.</p>
  </div

  <!-- Add an optional button to open the popup -->
  <button class="activebg_open">Active background example</button>

  <!-- Add content to the popup -->
  <div id="activebg" class="popUpDiv" style="max-width:30em;">
    <h4>Active backGround Example</h4>
    <p>Demonstrates the pop up with active background</p>
    <!-- Add an optional button to close the popup -->
    <button class="activebg_close">Close</button>

  </div>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#activebg').popup({
	backgroundactive:true
    });

    });
  </script>

</body>
</html>

You will see the following output in your browser.

Callback Events Example

The following example demonstrates the usage of callback functions like  beforeopen, onopen, onclose, opentransitionend and closetransitionend

callback.html

Copy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CallBack Events Example</title>

<style>
.popUpDiv{
        box-shadow: 0 0 10px rgb(0, 0, 0);
        display:none;
        margin:1em;
    }
</style>
</head>
<body>

  <!-- Add an optional button to open the popup -->
  <button class="callbackDemo_open">CallBack Example</button>

  <!-- Add content to the popup -->
  <div id="callbackDemo" class="popUpDiv" style="max-width:30em;">
    <h4>Callback Events Example</h4>
    <p>Demonstrates the Callback events</p>
    <!-- Add an optional button to close the popup -->
    <button class="callbackDemo_close">Close</button>

  </div>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#callbackDemo').popup({
        beforeopen: function () {
            alert('beforeopen');
        },
        onopen: function () {
            alert('onopen');
        },
        onclose: function () {
            alert('onclose');
        },
        opentransitionend: function () {
            alert('opentransitionend');
        },
        closetransitionend: function () {
            alert('closetransitionend');
        }
    });

    });
  </script>

</body>
</html>

You will see the following output in your browser.

That’s all for now and you will see more in the coming posts.

WhatsAppRedditLinkedin

Comments

  1. Hi jobin,

    How do I use multiple tooltips on the same page. I need to replace CLASS instead of ID. Can you help me with a working example please.

    Thank you in advance

    Reply

Comment Policy:Please submit comments to add value to the post. Comments like "Thank You" and "Awesome Post" will be not published. If you want to post code then wrap them inside <pre> tags. For example <pre>class Foo { }</pre>.
If you want to post XML content, then please escape < with &lt; and > with &gt; otherwise they will not be shown properly.

Leave a Reply

Your email address will not be published. Required fields are marked *