When should I use a popover vs a tooltip?

  • 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?

    There is a query that discusses when to use tool tip. Please refer to http://ux.stackexchange.com/questions/1245/to-tooltip-or-not-to-tooltip?rq=1

    Thanks Vjay, but no mention of when to use a popover.

  • DasBeasto

    DasBeasto Correct answer

    5 years ago

    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.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used