In modern web projects today, we often encounter UI components such as popovers, tooltips, and modals to increase user interaction. In this blog post, we will examine a popover component written with jQuery and designed with mobile compatibility in mind. The code will explain how a popover is designed using HTML, CSS, and JavaScript together, and how it is optimized for mobile devices.

What Is a Popover?

A popover is a small window component, usually opened by clicking a button or link, that presents additional information or actions. Popovers can provide extra information or enable quick actions without taking the user away from the page.

In the example in this article, a popover appears when a button is clicked. At the same time, if the browser does not support the popover feature, a fallback solution written with jQuery is activated. This way, popovers can still be used without creating a gap in the user experience even when the browser does not support them.

HTML Structure

In our code, the popover is defined as a component triggered by clicking a button. Here is the HTML part:

<button popovertarget="my-popover" class="popover-button">Open Popover</button>
 
<div popover id="my-popover" class="popover-container mobilePopoverBottomSheet">
  <div class="popoverTitle">
    <span>Popup Title</span>
    <button class="closePopover">
      <i class="close-icon"></i>
    </button>
  </div>
  <div class="popoverContent">
    <span>Greetings, one and all!</span>
  </div>
</div>

This structure consists of two main components:

• Button: The button that opens the popover. The popovertarget attribute specifies which popover should be opened.
• Popover Container: The container that holds the popover content. This component, which has the popover ID, is also optimized for mobile devices.

Popover Design with CSS

CSS defines the appearance and animations of the popover. There are a few important points to pay attention to here:

• Responsive Design: A special design is created for mobile devices with the @media query. When the screen width drops below 767px, the popover is set to full screen width and opens with an animation from bottom to top.
• Animations: The opening animation of the popover is designed using keyframes. On large screens, the popover opens by increasing opacity and scaling. On mobile, it is presented to the user by sliding upward with a vertical motion.

@keyframes popOver {
    from {
      opacity: 0;
      scale: 0.8;
    }
}
 
@media(max-width: 767px) {
  @keyframes mobilePopOver {
      from {
        opacity: 0;
        transform: translateY(100%);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
  }
}

Popover Functionality with JavaScript

There are two main functions in the JavaScript code:

• Browser Compatibility: If modern browsers do not support the popover API, a fallback popover written with jQuery is created. HTMLElement.prototype.hasOwnProperty("popover") checks whether the browser has the popover feature.
• Fallback Popover Solution: If the browser does not support popovers, the fallback solution is activated. The popover is hidden, and the popover-fallback class is added to present a fixed-position, centered window. Also, when it opens, a dark overlay (backdrop) is added to the background. The popover can be opened by clicking the button, and it closes when the user clicks the backdrop.

if(!HTMLElement.prototype.hasOwnProperty("popover")) {
  popover.hide();
  popover.addClass('popover-fallback');
  $('body').append('<div class="backdrop" style="display:none;"></div>')
 
  $(document).on('click', '[popovertarget]', function() {
    var popovertarget = $(this).attr('popovertarget');
    $('[id="'+popovertarget+'"], .backdrop').show();
  });
 
  $(document).on('click', '.backdrop', function() {
    $('.popover-fallback, .backdrop').hide();
  });
}

Conclusion

Popovers are important UI components that improve user experience and save screen space. In this article, we examined a popover example created with jQuery and CSS while considering browser compatibility. This design, especially optimized for mobile devices, aims to provide a smooth experience on both desktop and mobile.

When using popovers and similar components, it is very important to support both modern and older browsers. Thanks to the fallback solution in this article, a user-friendly experience is also provided for devices without browser support.

You can use this method to offer interactive content on your page and give your users a better experience in more projects and designs.

For the code example related to this topic, you can visit this URL.