WhatsAppRedditLinkedin

jQuery Popup and Tooltip Window Animation Effects

Jobin Bennett - 1 Comments
Filed Under: jQuery

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.

Options Default Description
type ‘overlay’ This is used to set the pop up type to overlay or tooltip.
autoopen false displays the popup when it is initialized.
background True Enables background cover but it is disabled for tooltips.
color ‘#000’ String value used to set the background color.
opacity 0.5 Used 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.
blur true Setting to true closes the popup when clicked outside.
transition Sets CSS transition when showing and hiding a popup
tooltipanchor Sets 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.

Methods Usage Description
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 Function Description
beforeopen This function is executed before pop up is opened
onopen Executes when the pop up starts to open.
onclose Executes on closing the pop up.
opentransitionend Execute after the opening CSS transition is over
closetransitionend Execute 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


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


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


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


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

Jobin Bennett is a software developer, working on both back-end and front-end technologies. He loves learning new things and shares his knowledge through JournalDev. He is also a trained Kick-Boxer.

Comments

  2. Stefan says:
    April 19, 2015 at 4:40 pm

    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

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages