{"id":294673,"date":"2019-08-26T08:12:37","date_gmt":"2019-08-26T15:12:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=294673"},"modified":"2019-08-26T08:12:37","modified_gmt":"2019-08-26T15:12:37","slug":"reusable-popovers-to-add-a-little-pop","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/reusable-popovers-to-add-a-little-pop\/","title":{"rendered":"Reusable Popovers to Add a Little Pop"},"content":{"rendered":"

A popover is a transient view that shows up on top of a content on the screen when a user clicks on a control button or within a defined area. For example, clicking on an info icon on a specific list item to get the item details. Typically, a popover includes an arrow pointing to the location from which it emerged.<\/p>\n

Popovers are great for situations when we want to show a temporary context to get user\u2019s attention when interacting with a specific element on the screen. They provide additional context and instruction for users without having to clutter up a screen. Users can simply close them by clicking the same way they were opened or outside the popover.<\/p>\n

We\u2019re going to look at a library called popper.js<\/a> that allows us to create reusable popover components in the Vue framework. Popovers are the perfect type of component for a component-based system like Vue because they can be contained, encapsulated components that are maintained on their own, but used anywhere throughout an app.<\/p>\n

Let\u2019s dig in and get started.<\/p>\n

<\/p>\n

But first: What\u2019s the difference between a popover and tooltip?<\/h3>\n

Was the name “popover” throwing you for a loop? The truth is that popovers are a lot like tooltips, which are another common UI<\/abbr> pattern for displaying additional context in a contained element. There are differences between them, though, so let\u2019s briefly spell them out so we have a solid handle on what we\u2019re building.<\/p>\n\n\n\n\n\n\n
Tooltips<\/th>\nPopovers<\/th>\n<\/tr>\n<\/thead>\n
Tooltips<\/strong> are meant to be exactly that, a hint or tip on what a tool or other interaction does. They are meant to clarify or help you use the content that they hover over, not add additional content.<\/td>\nPopovers<\/strong>, on the other hand, can be much more verbose, they can include a header and many lines of text in the body.<\/td>\n<\/tr>\n
Tooltips<\/strong> are typically only visible on hover, for that reason if you need to be able to read the content while interacting with other parts of the page then a tooltip will not work. <\/td>\nPopovers<\/strong> are typically dismissible, whether by click on other parts of the page or second clicking the popover target (depending on implementation), for that reason you can set up a popover to allow you to interact with other elements on the page while still being able to read it’s content.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Popovers are most appropriate on larger screens and we\u2019re most likely to encounter them in use cases such as:<\/p>\n