Popup-Maker
Popup-Maker copied to clipboard
PopupMaker
Need consistent tooltip/doc link strategy
Right now, throughout popup settings, theme editor, and main settings, we use question mark icons, "See details", "Learn more," and other different messages for giving users more info. Some present more info on the page while others send them to the documentation but none are indicated which are which.
As discussed in the UX audit, we need a defined, consistent strategy for these.
When more context/info is needed, I think our strategy should be:
- When adding info to a main setting name/header, use the question mark icon.
- Upon clicking, it should show a tooltip with a small paragraph of info. If more info is needed, we should have a "Learn More" link within the tooltip to take users to the documentation. Should show a new window indicator next to the link.
- When adding info to a description or upsell, we should use a link with a clear description of where they are going (E.g. "view documentation"). Should show a new window indicator next to the link.
@danieliser I don't know if the question mark on its own is obvious enough and it may not convey what it is enough. I like WP Rocket's strategy of doing "Need Help?" instead for each of its links. But, they do their's per section and we have ours per setting in some cases so it might be too much to have "Need Help?" at the end of each setting.
Maybe, in the settings, we stick to using the description for explaining with an additional "Learn more" or similar when needed. Then, in the interface itself, we can switch to a per section "Need Help?" or similar. For example, instead of having the ? on the trigger heading and the ? on the cookies heading, maybe we do a "Need Help?" or similar for the whole Triggers panel.
I like per section doc links, as well as a ( i ) or ( ? ) icon that opens a tooltip, the tooltip could also include a direct link for that fields docs if relevant.
@danieliser Do we already have a tooltip library/system in core or is there one within WP that you know of?
jQuery UI has a tooltip component so we could do that but wasn't sure if there was another option already available. If we go with a new library, I've used Tippy a few times but there are many others available too.
@fpcorso not that I'm aware of, but I'm sure it exists in core at this point. I know it does for the block editor at least.
@danieliser So, we don't have anything in PM currently for tooltips, right?
I did a search for within WordPress but I only found the tooltip component in the block editor but couldn't find any in regular WordPress core.
Looked through WooCommerce and they use a jQuery plugin called TipTip. They have a handy PHP helper function to output the necessary span: https://github.com/woocommerce/woocommerce/blob/686872a2372a71ed35b90a8ff790b046d0b40118/includes/wc-core-functions.php#L1548 and then have some JS in their admin JS to make the TipTip tooltips: https://github.com/woocommerce/woocommerce/blob/aa89afcf957beb6a387ad7d5d36fd7d95b3a353b/assets/js/admin/woocommerce_admin.js#L187 and here is the TipTip library they include: https://github.com/woocommerce/woocommerce/tree/master/assets/js/jquery-tiptip
TipTip doesn't seem to have any updates made to it in almost 10 years. So, I think we should consider Tippy if we go 3rd party. But, jQuery UI tooltips are in core so maybe that's what most go with? I'm not sure if jQuery UI tooltips would allow for the links and HTML we would want to add so I'll have to play with it.
@fpcorso if jQuery UI Tooltips doesn't offer "popovers" that include html, then they are out.
If you have a library that is modernized then that is fine.
@danieliser Oh, if we are wanting to add a beacon, that would be what opens when you click on the ? icons, right? So, if we end up doing that, we wouldn't need tooltips to, would we?
Or, would we have a tooltip open when you click on the ? and then the doc link inside would open the beacon?
Either of those conceptually works, though if we can just show a field description from the docs with supporting info available too then that is probably the way to go. Also prevents us needing an extra library.
@danieliser Hmmm...okay. I think I will clean up some of the links and then merge #928 for 1.15. Then punt the ?/tooltip discussion to 1.16 for when we start scoping out what the beacon integration (#929) will look like as that will heavily influence what we do here then.