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?
Answer
There are a couple considerations when deciding between a tooltip and a popover.
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:
Popovers are meant to give related additional 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:
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.
No comments:
Post a Comment