Are there any hard and fast rules about deciding when to use a tooltip versus a popover? I understand that tooltips don't have a header, but any other considerations?

To be consistent, does it make sense to always use a popover throughout a site? Or can you use both?


2 Answers 2


There are a couple considerations when deciding between a tooltip and a popover.

Purpose of Content

Tooltips 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:

enter image description here

Popovers are meant to give related additional content. enter image description here

Size of Content

Since tooltips are only meant to tell the purpose of an element they should be short and to the point "Click X to do X" or "User post count"

Popovers, on the other hand, can be much more verbose, they can include a header and many lines of text in the body.


Tooltips 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.

Popovers are typically dismissable, 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.

On top of that, since popovers will remain open when mousing out of their target you can add additional buttons or interactions within them:

enter image description here


If you want to give a small few word hint on how or what an element on the page does use a tooltip.

If you want to add any additional content, interactions, or content more than about a line; or if you need the content to remain open without the target being mousedover use a popover.

Although it should be noted due to accessibility problems, potential SEO issues, and lack of discovery of the tooltip/popover, neither are recommended unless you absolutely need them.


Tooltip is a special-case of popover, usually containing non-dismissible, non-interactive text.

Technically you can use popover all across, or implement tooltip using popover under the hood.

p.s. tooltip can appear only ones on a page, thus a library can be optimized for that (e.g. holding a single div for all tooltips and simply updating & repositioning it)

  • Hi TheZver, so when should you use a popover instead of a tooltip?
    – Nash
    Commented Oct 22, 2020 at 8:59
  • Hi Nash, Use tooltip to display descriptions on hover (similar to HTML's title attribute - developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…). For more advanced cases use popover, e.g.: - Interaction with the popped content is needed - The popped content is triggered other than by hover - Popped content have its own tooltips / popovers - Content contains special frame / header and such
    – TheZver
    Commented Oct 22, 2020 at 11:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.