Long Hover

< img src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/long-hover.jpg" class=" ff-og-image-inserted" > I had a really awkward CSS minute a few days ago.

I was dealing with the front-end code of a style that had a narrow sidebar of icons. There isn’t adequate space there to reveal text of what the icons are, so the concept is that we’ll utilize available (however aesthetically concealed, by default) text that remains in there currently as a tooltip on a “long hover.” That is, a gadget with a cursor, and the cursor hovering over the aspect for a while, like 3 seconds.

My mind went like this …

  1. I can use utilize: the tooltip is either noticeable or not noticeable. I’ll handle the state, which will manifest in the DOM as a class name on an HTML element.Then I’ll deal
  2. with the reasoning for altering that state.The default state will be not noticeable, however if the mouse is inside the component for over 3 seconds, I’ll change the state to noticeable. If the mouse ever leaves the aspect, the state will stay( or ended up being) not noticeable. This was a React job, so state was simply on the mind. That wound up like this: Not that bad, best

? Eh. Having state handled in JavaScript does possibly open somedoors, however in this case,

it was overall overkill. Aside from the truth that I discover mouseenter and mouseleave a little picky, CSS might have done the whole thing, and with less code. That’s the humiliating part … why would I rise the chain to a JavaScript library to do this when the CSS that I’m currently composing can manage it? I’ll leave

the UI in React, however remove all the state management things. All I’ll do is include a transition-delay: threes when the. icon is: hover

that it’s absolutely no seconds when not hovered, then disappears instantly when the mouse cursor leaves). A long hover is generally a one-liner in CSS:< pre rel =" HTML" class=" wp-block-csstricks-code-block language-markup” data-line >. thing. thing: hover * hold-up hover animation just ON,

not OFF * Functions excellent.
One issue that isn't attended to here is the touch screen issue. You might argue screen readers are 

OKAY with the available text and desktop web browsers are OKAY since of the customized tooltips, however users with touch-only screens may be not able to find the icon labels. In my case, I was constructing for a big screen circumstance that presumes cursors, however I do not believe all-is-lost for touch screens. If the component is a link, the: hover may fire on first-tap anyhow. That may be sufficient context if the link takes you someplace with a clear title. And you can constantly return to more JavaScript and manage touch occasions.

Leave a Reply

Your email address will not be published. Required fields are marked *