Search code examples
htmlcssformsinputtooltip

HTML Form Input Title Styling

I am in the process of making a form for my website and I need some tooltips on my input fields that explains what the user should type in that field. I've looked around for ways to style the title attribute as well as several ways with "span" and other tags, but nothing seems to work. Some of the methods worked on text, but none of them worked on an input field.

Is there any way to make such tooltips on input fields? The simpler the better.

Solution

  • Several ways to do this, Jquery UI for example comes with a way to do this (https://jqueryui.com/tooltip/ )

    or you could use a as a tooltip and trigger it on hover (or whenever) via js, this example: this example by Eric Kidd is quite similiar.

    What you need to do to display your tooltip on hover basically is:

    1. Style a label to be displayed whereever you want it(this will be your tooltipbox)
    2. Define a .is-active class, which hides your label if it is not attached to your form-input

    3. trigger the class on hover, for example like this

      $(".form").mouseenter( handlerIn ).mouseleave( handlerOut );

function handlerIn () {
 this.addClass("is-active");
}

function handlerOut () {
 this.removeClass("is-active");
}