Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Add a Popover
  • Popover Content
  • Trigger element
  • Trigger ID
  • Popover Settings
  • General
  • Trigger Interactions
  • Hover
  • Click
  • Focus
  • Hide On
  • Position
  • Position
  • Placement
  • Offset
  • Shift
  • Flip
  • Timing
  • Animation
  • Duration
  • Duration (out)
  • Delay
  • Open Popover from another Element
  • Show
  • Hide
  • Show to Hide
  • Toggle

Was this helpful?

  1. Blocks

Popover

Last updated 2 years ago

Was this helpful?

The popover block is a pop-up box that appears on hover, click, or focus when the user interacts with an element - known as the trigger.

The popover block is designed to contain as much content as the user requires.

The popover block is an independent block that has no parent.

It acts as a container in itself so in most circumstances you do not have to put your content inside a div.

If you haven't added any content to the popover block or set a fixed height or width, then it will disappear when you add the trigger.

For accessibility and clarity purposes, it is preferable to place the popover block underneath the trigger element.

Add a Popover

  • Open the Block inserter and find the popover block.

  • Click to add it to your page.

Popover Content

It is helpful to add content to your popover (heading, paragraph, image etc) and/or set a fixed height or width before adding a trigger.

Otherwise the popover will not be visible when the trigger is activated.

You can fully customise your popover using the tabs provided (layout, colours, margin and padding).

Trigger element

A trigger is any block that is used to activate the popover. The block ID of the trigger element is used as the Trigger ID for the popover.

An example would be a cart icon which when clicked or hovered over, brings up a popover with the cart contents.

For accessibility and clarity, we recommend you add the popover block underneath the trigger.

Trigger ID

The Trigger ID input window allows you to input or select (in the dropdown) the block ID of the trigger you require to activate the popover.

  • Select the element that you wish to trigger the popover.

  • Copy the block ID

  • Paste the block ID into the Trigger ID window(Primary tab, Popover tab, General tab).

Popover Settings

The Popover tab gives you access to the General , Position and Timing tabs.

General

The General tab allows you to select the type of popover interaction(hover, click, focus), add the Trigger ID, Disable Focus, Hide on click, click in, click out.

Trigger Interactions

The popover can be triggered by hover, click or focus.

The selected interaction will only apply on the frontend.

When on the backend you can click the trigger element to open and close the popover.

Hover

The Hover property allows the popover to appear when the user hovers over the trigger element.

Hover interactive

When the hover property is selected, the hover interactive toggle becomes visible.

When enabled, this allows you to interact with the contents of the popover on hover.

  • Navigate to the General tab of the Popover tab in the Primary tab.

  • Find the Interactive toggle.

  • Toggle on/off to enable or disable interaction with popover contents.

Click

The Click property allows the popover to appear when the trigger block is clicked.

This is only visible on the backend and frontend.

Disable Focus

The Disable Focus property becomes available when you select Click in the General settings.

This allows you to decide whether on not you want your users to interact with an input field in the popover.

Focus

The Focus property allows you to show the popover when you focus on the trigger element (click, tab etc).

Hide On

The Hide On property is available on Click or Focus.

It allows you to choose how you wish the popover to be hidden (Click, Click In, Click Out).

Click

The popover will be hidden if you click anywhere on the screen.

Click In

The popover will be hidden if you click anywhere inside the popover but not if you click outside the popover.

Click Out

The popover will be hidden if you click anywhere outside the popover but not if you click inside the popover.

Position

The Position tab contains the properties that control where the popover is positioned relative to the trigger.

Position

By default, the popover is Absolute (relative to the trigger) but you can choose to select Fixed(relative to the viewport) in the dropdown as required.

To reset, click on the blue dot.

Placement

The Placement property determines where the popover will be positioned.

You can choose between ( top start, top centre, top end, right start, right centre, right end, bottom start, bottom centre, bottom end, left start, left centre, left end).

Offset

The Offset property allows you to displace a popper from its trigger. This can be useful if you need to apply some distance between them.

Shift

The shift property shifts your floating element to keep it in view on scroll or on different screen sizes.

Flip

The Flip property changes the placement of your floating element to keep it in view.

Timing

The Timing tab contains all the properties to create and control a variety of animations you can apply to your popover.

You can also vary the duration and delay.

Animation

The animation property allows you to choose from a variety of animations to add to your popover to personalise them and make them more attractive to the user.

Available animations include: fade, scale, scale subtle, scale extreme, scale top right, scale subtle top right. scale extreme top right, scale top left, scale subtile top left, scale extreme top left, scale bottom right, scale subtle bottom right, scale extreme bottom right, scale bottom left. scale subtle bottom left. scale extreme bottom left. shift toward, shift toward subtle, shift toward extreme, shift away, shift away subtle, shift away extreme, perspective, perspective subtle, perspective extreme.

Duration

The Duration property allows you to choose how long the animation should take to appear completely.

Duration (out)

The Duration (out) property allows you to choose how long the animation should take to disappear completely.

Delay

The Delay property allows you to choose the time between the trigger interaction and the beginning of the animation.

Delay (Out)

The Delay (Out) property allows you to choose the time between the trigger interaction (click, click in, click out) and the disappearance of the animation.

Open Popover from another Element

A popover can be opened from any other element by using a link wrapper.

This gives you greater design freedom and flexibility.

  • Select block you wish to be a new trigger.

  • Enable Link in the Block Inspector by toggling the lInk icon.

  • This will open a Link modal.

  • Ensure that Active is toggled on.

  • Chose Action as the Link Type in the dropdown.

  • Choose required Action (Show, Hide, Show-Hide) depending on how you wish the interaction to work.

Show

The Show property enables the new trigger element to show the popover when clicked.

  • Input or paste the Popover ID.

Hide

The Hide property enables the trigger element to close the popover when clicked.

Input the Popover ID in the designated window.

Show to Hide

The Show to Hide property enables the trigger element to show the popover for a designated time and then hide it.

Input the popper ID in the designated window.

You can set the delay before it appears (delay in) and the time for which it is visible before it disappears (delay out).

Toggle

The Toggle property enables the new trigger to show or hide the popover as required.

Input the popover ID in the designated window.

🔧