Reusable Popovers to Add a Little Pop

Popovers are temporary overlays displayed on screen interaction, often triggered by clicking a control or within a specific area. Think of an info icon revealing details about a list item—the popover provides that extra context. A key feature is the arrow indicating its origin.

Popovers are ideal for presenting temporary information without cluttering the screen. They offer concise context and instructions, closing automatically or via user interaction (clicking outside or the trigger).

This guide uses Popper.js to build reusable popover components within the Vue framework. Popovers are perfectly suited to Vue's component-based architecture, allowing for self-contained, easily maintainable, and widely usable components.

Popovers vs. Tooltips: A Quick Distinction

The terms "popover" and "tooltip" are often confused. While similar, they have key differences:

Tooltips	Popovers
Brief hints or tips clarifying a tool or interaction. They explain existing content, not add new information.	Can contain more extensive content, including headers and multiple lines of text.
Typically appear on hover. Unusable if content needs to be read while interacting elsewhere on the page.	Usually dismissible (via click outside or a second click on the trigger), allowing interaction with other page elements while the popover remains visible.

Popovers are best suited for larger screens and common use cases like:

• Dropdown menus
• User onboarding
• Temporary forms
• List item context menus

These use cases highlight key popover requirements:

1. Reusability: Easily customizable content.
2. Dismissibility: Closable by clicking outside or using the Escape key.
3. Positioning: Automatic repositioning to remain within the viewport.
4. Interaction: Allowing user interaction with the popover's content.

Let's build this! A working demo is available for reference.

Step 1: The BasePopover Component

This component handles popover initialization and positioning. BasePopover.vue renders:

• Popover content: A slot for flexible content passed from the parent component.
• Popover overlay: A full-screen overlay for dismissibility and interaction control.

// BasePopover.vue
<template>
  <div>
    <div ref="basePopoverContent">
      <slot></slot>
    </div>
    <div ref="basePopoverOverlay"></div>
  </div>
</template>

<script>
import Popper from "popper.js";

export default {
  name: "BasePopover",
  props: {
    popoverOptions: { type: Object, required: true }
  },
  data() {
    return { popperInstance: null };
  },
  methods: {
    // ... (methods will be added in Step 2)
  },
  mounted() {
    this.initPopper();
    this.updateOverlayPosition();
  }
};
</script>

The popoverOptions prop includes:

• popoverReference: The element triggering the popover.
• placement: Popper.js placement (e.g., "top", "bottom").
• offset: Popper.js offset modifier for fine-tuning position.

Step 2: Popper.js Initialization

We'll add methods to position and show the popover. initPopper creates a Popper instance:

methods: {
  initPopper() {
    const modifiers = {};
    const { popoverReference, offset, placement } = this.popoverOptions;

    if (offset) modifiers.offset = { offset };
    if (placement) modifiers.placement = placement;

    this.popperInstance = new Popper(
      popoverReference,
      this.$refs.basePopoverContent,
      {
        placement,
        modifiers: {
          ...modifiers,
          preventOverflow: { boundariesElement: "viewport" }
        }
      }
    );
  },
  updateOverlayPosition() {
    const overlayElement = this.$refs.basePopoverOverlay;
    const overlayPosition = overlayElement.getBoundingClientRect();
    overlayElement.style.transform = `translate(-${overlayPosition.x}px, -${overlayPosition.y}px)`;
  }
  // ... (other methods will be added in Step 3)
}

updateOverlayPosition ensures the overlay covers the entire screen under the popover.

Step 3: Destroying the Popper Instance

We need to clean up when the popover closes. destroyPopover handles this:

methods: {
  // ... (previous methods)
  destroyPopover() {
    if (this.popperInstance) {
      this.popperInstance.destroy();
      this.popperInstance = null;
      this.$emit("closePopover");
    }
  }
}

A click listener on the overlay triggers destroyPopover.

Step 4: Rendering the BasePopover Component

Let's render the popover in a parent component.

<template>
  <div>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174485893388623.png?x-oss-process=image/resize,p_40" class="lazy" alt="Reusable Popovers to Add a Little Pop ">
    <basepopover :popover-options="popoverOptions" v-if="isPopoverVisible">
      <basepopovercontent>
        <div>
          <img  src="/static/imghwm/default1.png" data-src="./assets/logo.png" class="lazy"    style="max-width:90%" alt="Reusable Popovers to Add a Little Pop" >
          Vue is Awesome!
        </div>
      </basepopovercontent>
    </basepopover>
  </div>
</template>

<script>
import BasePopover from "./BasePopover.vue";
import BasePopoverContent from "./BasePopoverContent.vue";

export default {
  components: { BasePopover, BasePopoverContent },
  data() {
    return {
      isPopoverVisible: false,
      popoverOptions: {
        popoverReference: null,
        placement: "top",
        offset: "0,0"
      }
    };
  },
  mounted() {
    this.popoverOptions.popoverReference = this.$refs.popoverReference;
  },
  methods: {
    openPopover() { this.isPopoverVisible = true; },
    closePopover() { this.isPopoverVisible = false; }
  }
};
</script>

This adds the click handler and the @closePopover listener.

Step 5: The BasePopoverContent Component

This component adds the visual popover styling:

// BasePopoverContent.vue
<template>
  <div class="popover-content">
    <div class="arrow" x-arrow></div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<style scoped>
.popover-content {
  /* Add your popover styling here */
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  transform: rotate(45deg);
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
</style>

Remember to add CSS for styling. This completes the basic popover. Further enhancements (keyboard navigation, advanced interactions) can be added as needed. A complete, working example with animation and more advanced features is available in the linked demo.

The above is the detailed content of Reusable Popovers to Add a Little Pop. For more information, please follow other related articles on the PHP Chinese website!