How to Disable HTML5 Validation Tooltips for Input Elements Without Form

In html5 you have two options for input elements:

1. Put them inside a <form> container.
2. Add the form attribute to the input, the value should be the id of the form that the input is related to.

Using option #2 you can just add an empty form with the novalidate somewhere in your DOM and attach the input to that form:

<form novalidate>
  <p>Input in form with novalidate. This one is fine.</p>
  <input type="email" required>
</form>

<p>Input without form. How to disable validation tooltips? (hover over input to see validation tooltip)</p>
<input type="email" required form="novalidatedform">

<form id="novalidatedform" novalidate />

More information regarding the input element in MDN website.

Although the Accepted answer does the job, one another way how this could be done is by simply adding a 'title' attribute to the input element, and the validation message will be overwritten with the content in title attribute.

You can add some meaningful text in the title attribute,

<input type="email" title="Your Email"> 

P.S In HTML5, the title attribute can be used on any HTML element unlike in HTML 4.01.

You can also use this script

<script>
    document.getElementById( "inputId" ).addEventListener( "invalid",
        function( event ) {
            event.preventDefault();
        });
</script>