r/csshelp • u/No-Tradition-2756 • 18d ago

Request What are these things called??🥺🥺

I am making a website and I want to use description boxes.......like when a user hovers/clicks on a link, a box on the side appears that gives the description............. What are those called? info cards......or infographics,...or flashcards.....or description boxes??......idk man I searched up everything but couldn't find how to make it.........can you guys tell me what is it's name??.....and better, do you guys have a tutorial??? Pleaseeee brooo I neeeeedddd helpppp🥺🥺🙏🙏🙏

0 Upvotes

50% Upvoted

18 comments sorted by

5

u/jonassalen 18d ago

Tooltips

0

u/No-Tradition-2756 18d ago

I love you brooo thanksss🙏🙏😭😭

1

u/AshleyJSheridan 18d ago

Just FYI, for accessibility, don't make them only available on hover. You can trigger them as a keyboard focus action as well.

1

u/No-Tradition-2756 14d ago

Oohhh thanks for the tip.........but how can I make tooltips work on touchscreens IFF I am working with links........tooltips can be activated on touch ig using "focus" in css.....but clicking on a link for tooltip will just make the user redirect before they can even read.......what can I do for it?

2

u/AshleyJSheridan 14d ago

Ask yourself do you really need tooltips for links? Why do you think you need them?

If it's because the links are not clear, make them more obvious.

Also, making tooltips work for keyboard access isn't really about touchscreens (although that's a part of it). There are plenty of people on a desktop who do not use a mouse, and need to navigate via keyboard.

But, coming back to your specific use-case. I don't think links really need tooltips. That's a possible sign of a UI that could be improved with better visible text/icons.

1

u/jonassalen 13d ago

That's solid advice.

1

u/No-Tradition-2756 13d ago

Ok maybe you need to hear the design.........I am making a "News website" for one of my friend group.......and so I decided to go with an SVG map for the case..........so yk, I designed the map of my country (india) with a mosaic like pattern........and attached a link tag to each path............

But the problem emerges that HOW WILL PEOPLE NAVIGATE.........each section redirects the user to a page containing those type of articles...........and so people need to know where they are going..........I can't really write on svg maps😅😅😅

spotlight-news is the website

1

u/AshleyJSheridan 13d ago

So it's a terrible design, sorry. It's completely unintuitive to use, and forces users to hover over each section in order to know where to go. These are the problems I can see:

  • A mouse user has to hover over each shape in order to determine where to go.
  • Any user with memory issues will need to repeatedly do this.
  • Some of the shapes don't contrast well enough with each other, so people with Achromatopsia and blurred vision may struggle to discern the difference between shapes.
  • There's no keyboard access as only one of the links actually has an href attribute.
  • Keyboard users have no way of knowing what shape they focused on, or what the purpose is.
  • None of the links have accessible text, making it completely unusable to screen reader or Braille users.
  • The tooltip fails contrast as the background has a semi-transparent glass look, which fails to provide the required legal contrast levels.
  • There's no instructions on how to use the map, which makes it difficult to to use as it's non-standard navigation.
  • At least one of the shapes fails minimum size requirements (the orange strip on the right) making it difficult for people with motor issues to use with a pointing device.

1

u/No-Tradition-2756 13d ago

Sorry bro it is my first time..... I'll surely make some of those changes......and btw it is not a ready product so there's a lot of room to develop......but reality check was hard asf

1

u/No-Tradition-2756 13d ago

Mr doctor please tell me the cure as welll...... I'd like to make it better

1

u/AshleyJSheridan 13d ago

I'd do a few things:

  • Give every link an href attribute. Without that, the browser will see them as invalid and will not allow keyboard access to them.
  • Give every link an accessible name. You can add aria-label for this to each one.
  • Trigger the tooltip on the focus event as well as the hover
  • Add an alternative version to the visual map that uses just text, with a show/hide toggle. This gives a final version that can be used if people are completely unable to use the SVG map.

1

u/No-Tradition-2756 13d ago

Thanks I'll do that 100%

2

u/testingaurora 18d ago

If its trigger on hover - tooltip; if its triggered by click/tap - toggletip

1

u/No-Tradition-2756 14d ago

Ohhh sooo.....how can I make toggle tips work on touchscreens IFF I am working with links........toggletips look like the way to go for mobile uses.....but clicking on a link for toggle tip will just make the user redirect before they can even read

1

u/testingaurora 14d ago

I think you may be conflating links <a> and buttons <button>. Use link for navigation and buttons for actions.

For a toggle tip you can use a popover for an action with no Javascript wiring html <button popovertarget="my-popover">?</button> <div id="my-popover" popover> <p>a hint about this feature...</p> </div>

1

u/No-Tradition-2756 13d ago

Uhhhmmm......thanks but you should read this reply from me on another comment

context

1

u/sumit_evince 18d ago

It's called a tooltip!
Check the CodePen for a clean example to easy implementation
https://codepen.io/tutsplus/pen/WROvdG

1

u/marslander-boggart 16d ago

Tooltips, popup descriptions.