How to hover element on input click

I have an input

<input type="text"><abbr title="this field is required">

When click inside input then how make that display that title from abbr tag like on click and also do hover on abbr tag? Any selector?

Thanks.

Hover and click are CSS pseudoclasses and have to be selected individually. Does this article help? https://css-tricks.com/pseudo-class-selectors/

What do you mean “make that display”? For example, if I like on the input element, what exactly are you wanting to happen?

@bestdesign, I think I know what you’re asking.
If you have a form any area that you want users to put in text there’s a defacto standard that required fields are marked with an asterisk. If you’ve ever filled out a form on-line you’ve probably noticed this. The keyword required will also be used, like;

<textarea id="comments" rows="8" cols="50" placeholder="Additional comments" required></textarea>

The <abbr> tag is used for something else. For a quick example of how that tag is used go to my codepen Tech Doc page, click on the ‘What is CSS?’ article and look at the second paragraph. The <abbr> tag is used three times to define HTML, SVG and XML when the user hovers. (Sorry but it’s late and I didn’t feel like creating a new pen to show (a smaller version of) something that I’d already done.)

You could probably do something in JavaScript to pop up a modal to show the field is required but I think that would be over kill.

If this doesn’t answer your question, just ignore it.

1 Like
<abbr title="this field is required">
   <input type="text" id="flower" placeholder="this field is required">
</abbr>