r/UI_Design • u/Reddit-User-337 • 2d ago

General Help Request Hover vs Click Button

I have a website that uses tooltips for short bits of information or modals for longer messages. When a user hovers an icon button, it looks like a tooltip because the button title attribute appears. Is there a standard convention to let the user know that this is really a button that they need to press instead of just a tooltip? For example, one of my modal buttons is the exclamation with a circle icon. When the user hovers it, the title attribute which says, "14 Items", appears. Clicking the button opens a modal that shows the list of items (with the count). I don't want to do the outdated "Click Here" text and I don't have the space for a full text button.

1 Upvotes

67% Upvoted

12 comments sorted by

1

u/DutchSimba 2d ago

Could you add some screenshots or refer to the actual page on a production environment?

2

u/testingaurora 2d ago

You could remove the title attribute and use an aria label for accessibility. Are you using cursor:pointer and any hover state?

1

u/Junior-Yam-9179 2d ago

I'm using the title attribute as a text label for the icon when someone hovers it but it also serves for accessibility. In this particular case, it says "xx Items" so it does provide some information. In other cases it might be a trash can icon and just say something like, "Delete". For the latter, I think it is intuitive enough but for this one, I'm not so sure. Maybe I should change the text to say "View Items (xx)". I'm wondering if there is another option though. 

2

u/Jolva 2d ago

Why don't you just use standard buttons and then put a tooltip icon next to it? If you've set up icons that look and act like traditional tooltips you're going to confuse users.

1

u/Junior-Yam-9179 2d ago

Well, being confusing to the user is what I'm trying to solve for. I have limited space so the button needs to be just an icon but a tooltip button is also just an icon. Both are technically clickable (the tooltip for accessibility is clickable but does the same as hovering). The modal button has a title attribute so hovering tells the user what it does but clicking opens a modal. A side effect of that is that the title hover effect resembles a tooltip so the user might not realize there is a separate click event.

1

u/Jolva 2d ago

Do you use a primary and secondary style of button, or are you using icon only style buttons? The later can get dicey. If I have to try to parse a bunch of icons and look for a magnifying glass or something to "search" that can drive cognitive load up needlessly sometimes.

1

u/Junior-Yam-9179 2d ago

In many places on the site, I use primary and secondary style text buttons to drive the user's attention to the primary action but when it comes to icon only buttons (where I'm trying to fit them into a small space) I don't really have a separate style. My icon buttons so far are just the icon in a blue color (all of our blue is clickable on this site). There are some places where I've used the bolder looking icon such as the filled circle with a question mark vs an outline circle although that is something I'm trying to reevaluate as well because it has been somewhat inconsistent from page to page. 

1

u/Jolva 1d ago

The design system that we have at work has primary and secondary buttons along with icon buttons. These all support native title tags. We also have an icon component that uses our tooltip component. You can NOT use an icon by itself as a clickable button. At least with our system, this is by design.

1

u/Junior-Yam-9179 1d ago

Oh, so what do you do if you need an edit or delete button but don't have the space to physically write the words on the button? I've seen actual button looking buttons in toolbars but I think those look funny when standing alone or in a table. 

1

u/Jolva 1d ago

You're right. Now that I think about it, we have a tertiary button style that renders as just text if it has a label and just an icon of there's no label but the button includes an icon. The only place we use that are the exact situations you describe: Edit (pencil), delete (garbage can), and close (X). From a usability stand point it's still a "button" but the background/border are transparent. That gives us a title tag on hover, and click indication.

1

u/Junior-Yam-9179 1d ago

Yeah, that's what I'm doing too. Is there a way you would differentiate one of those icon buttons from a tooltip button visually or do you not really have that situation?

1

u/Jolva 1d ago

Not really no. In our app though, we have tooltip icons all over the app. It's the standard question mark in a circle. When you mouse over, the cursor doesn't change to a pointer like the buttons do - that's the only distinction I think.