search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
    • Overview
    • API

    Popover

    Tailwind CSS React Popover

    Documentation and examples for adding React Popovers, like those found in iOS, to any element on your site.


    Basic example

    In the following example you can see the button that will trigger the popover element to be shown when clicked.

    Loading...
    • JSX
            
                
          import React from "react";
          import {
            TEPopover,
            TEPopoverToggler,
            TEPopoverContent,
            TERipple,
          } from "tw-elements-react";
          
          export default function PopoverBasicExample(): JSX.Element {
            return (
              <TEPopover className="py-10 md:text-center">
                <TERipple rippleColor="light">
                  <TEPopoverToggler className="inline-block rounded bg-danger px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#dc4c64] transition duration-150 ease-in-out hover:bg-danger-600 hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:bg-danger-600 focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:outline-none focus:ring-0 active:bg-danger-700 active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(220,76,100,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)]">
                    Click to toggle popover
                  </TEPopoverToggler>
                </TERipple>
          
                <TEPopoverContent>
                  <h3 className="py-2 px-4 mb-0 shadow-[0_0px_3px_0_rgba(0,0,0,0.07)] bg-white bg-clip-padding rounded-t-lg border border-b-2 border-neutral-100 font-medium empty:hidden dark:border-x-0 dark:border-t-0 dark:border-neutral-500 dark:bg-neutral-700">
                    Popover title
                  </h3>
                  <div className="p-4 text-[#212529] rounded-b-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                    And here's some amazing content. It's very engaging. Right?
                  </div>
                </TEPopoverContent>
              </TEPopover>
            );
          }      
          
            
        

    Overview

    Things to know when using the popover plugin:

    • Triggering popovers on hidden elements will not work.
    • When triggered from hyperlinks that span multiple lines, popovers will be centered. Use whitespace-nowrap class on your <a> elements to avoid this behavior.
    • Popovers must be hidden before their corresponding elements have been removed from the DOM.
    • Popovers can be triggered thanks to an element inside a shadow DOM.

    Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Four directions

    Click on the buttons below to see the four popovers directions: top, right, bottom, left. Check API Properties to see all available options.

    Loading...
    • JSX
            
                
          import React from "react";
          import {
            TEPopover,
            TEPopoverContent,
            TEPopoverToggler,
            TERipple,
          } from "tw-elements-react";
          
          export default function PopoverFourDirections(): JSX.Element {
            return (
              <div className="flex space-x-1">
                <TEPopover>
                  <TERipple rippleColor="light">
                    <TEPopoverToggler className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                      Popover on top
                    </TEPopoverToggler>
                  </TERipple>
          
                  <TEPopoverContent placement="top">
                    <div className="p-4 text-[#212529] rounded-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                      Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
                    </div>
                  </TEPopoverContent>
                </TEPopover>
                <TEPopover className="text-left">
                  <TERipple rippleColor="light">
                    <TEPopoverToggler className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                      Popover on right
                    </TEPopoverToggler>
                  </TERipple>
          
                  <TEPopoverContent>
                    <div className="p-4 text-[#212529] rounded-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                      Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
                    </div>
                  </TEPopoverContent>
                </TEPopover>
                <TEPopover>
                  <TERipple rippleColor="light">
                    <TEPopoverToggler className="max-w-[180px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                      Popover on bottom
                    </TEPopoverToggler>
                  </TERipple>
          
                  <TEPopoverContent placement="bottom">
                    <div className="p-4 text-[#212529] rounded-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                      Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
                    </div>
                  </TEPopoverContent>
                </TEPopover>
                <TEPopover className="text-right">
                  <TERipple rippleColor="light">
                    <TEPopoverToggler className="max-w-[160px] rounded bg-primary-100 px-6 py-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                      Popover on left
                    </TEPopoverToggler>
                  </TERipple>
          
                  <TEPopoverContent placement="left">
                    <div className="p-4 text-[#212529] rounded-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                      Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
                    </div>
                  </TEPopoverContent>
                </TEPopover>
              </div>
            );
          }      
          
            
        

    Dismiss on next click

    Use trigger="focus" to dismiss on the next click of a different element than the toggle element.

    Loading...
    • JSX
            
                
          import React from "react";
          import {
            TEPopover,
            TEPopoverToggler,
            TEPopoverContent,
            TERipple,
          } from "tw-elements-react";
          
          export default function PopoverDismiss(): JSX.Element {
            return (
              <TEPopover className="py-10 md:text-center" trigger="focus">
                <TERipple rippleColor="light">
                  <TEPopoverToggler className="inline-block rounded bg-danger px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#dc4c64] transition duration-150 ease-in-out hover:bg-danger-600 hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:bg-danger-600 focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:outline-none focus:ring-0 active:bg-danger-700 active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(220,76,100,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)]">
                    Dismissible popover
                  </TEPopoverToggler>
                </TERipple>
          
                <TEPopoverContent>
                  <div className="p-4 text-[#212529] rounded-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                    Dismissible popover And here's some amazing content. It's very
                    engaging. Right?
                  </div>
                </TEPopoverContent>
              </TEPopover>
            );
          }      
          
            
        

    Disabled elements

    Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a popover (or tootlip). As a workaround, you’ll want to trigger the TEPopoverToggler from a wrapper <div> or <span>, ideally made keyboard-focusable using tabIndex={0}, and override the pointer-events on the disabled element.

    Loading...
    • JSX
            
                
          import React from "react";
          import {
            TEPopover,
            TEPopoverContent,
            TEPopoverToggler,
          } from "tw-elements-react";
          
          export default function PopoverDisabled(): JSX.Element {
            return (
              <TEPopover className="py-10 md:text-center" trigger="hover focus">
                <TEPopoverToggler className="inline-block" tag="span">
                  <button
                    type="button"
                    className="pointer-events-none inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] disabled:opacity-70 dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                    disabled
                  >
                    Disabled button
                  </button>
                </TEPopoverToggler>
          
                <TEPopoverContent>
                  <div className="p-4 text-[#212529] rounded-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                    Disabled popover
                  </div>
                </TEPopoverContent>
              </TEPopover>
            );
          }      
          
            
        

    Related resources

    Button group Buttons

    If you are looking for more advanced options, try Bootstrap Popover from MDBootstrap.

    • Basic example
    • Overview
    • Four directions
    • Dismiss on next click
    • Disabled elements
    • Related resources

    Popover - API


    Import

    • javascript
            
                
            import {
              TEPopover,
              TEPopoverToggler,
              TEPopoverContent,
            } from "tw-elements-react";
            
            
        

    Properties

    TEPopover

    Name Type Default Description
    enabled Boolean true Gives an element’s popover the ability to be shown. Popovers are enabled by default.
    isOpen Boolean false Set open popover on mounted component.
    tag String 'div' Defines tag of the TEPopover element.
    trigger String 'click' How popover is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space.

    TEPopoverToggler

    Name Type Default Description
    tag String 'button' Defines tag of the TEPopoverToggler element.

    TEPopoverContent

    Name Type Default Description
    boundary string | element 'clippingParents' Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs.
    container string/boolean false Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
    fallbackPlacement String/Array ["top", "right", "bottom", "left"] Allow to specify which position Popper will use on fallback. For more information refer to Popper's behavior docs.
    offset Array [0, 0] Offset of the popover relative to its target. For more information refer to Popper's offset docs.
    popperConfig Object - Allows to change the default Popper config, see Popper's configuration.
    placement String 'right' Sets the position of the popover. Available properties: "top" | "auto" | "auto-start" | "auto-end" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
    popperTag String 'div' Set custom tag to popper component.
    theme Object {} Allows to change the Tailwind classes used in the component.

    Classes

    Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

    TEPopoverContent

    Name Default Description
    fade transition-opacity ease-linear motion-reduce:transition-none Sets animation effect for the popover content.
    popoverContent z-[1070] p-1 block max-w-[267px] rounded break-words text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal dark:text-white data-[popper-reference-hidden='true']:hidden Sets styles to the popover content element.

    Events

    Event type Description
    onHide This event is fired immediately when the hide method has been called.
    onHidden This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
    onShow This event fires immediately when the show instance method is called.
    onShown This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
    • JSX
            
                
            import React from "react";
            import {
              TEPopover,
              TEPopoverToggler,
              TEPopoverContent,
              TERipple,
            } from "tw-elements-react";
            
            export default function PopoverBasicExample(): JSX.Element {
              return (
                <TEPopover className="py-10 md:text-center" onShow={() => console.log("onShow")}>
                  <TERipple rippleColor="light">
                    <TEPopoverToggler className="inline-block rounded bg-danger px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#dc4c64] transition duration-150 ease-in-out hover:bg-danger-600 hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:bg-danger-600 focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:outline-none focus:ring-0 active:bg-danger-700 active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(220,76,100,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.2),0_4px_18px_0_rgba(220,76,100,0.1)]">
                      Click to toggle popover
                    </TEPopoverToggler>
                  </TERipple>
            
                  <TEPopoverContent>
                    <h3 className="py-2 px-4 mb-0 shadow-[0_0px_3px_0_rgba(0,0,0,0.07)] bg-white bg-clip-padding rounded-t-lg border border-b-2 border-neutral-100 font-medium empty:hidden dark:border-x-0 dark:border-t-0 dark:border-neutral-500 dark:bg-neutral-700">
                      Popover title
                    </h3>
                    <div className="p-4 text-[#212529] rounded-b-lg shadow-[0_0px_3px_0_rgba(0,0,0,0.07),0_2px_2px_0_rgba(0,0,0,0.04)] bg-white bg-clip-padding border border-t-0 border-neutral-100 empty:hidden dark:text-white dark:border-0 dark:bg-neutral-700">
                      And here's some amazing content. It's very engaging. Right?
                    </div>
                  </TEPopoverContent>
                </TEPopover>
              );
            }        
            
            
        
    • Import
    • Properties
    • Classes
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com