How to Make an HTML Text Box Show a Hint When Empty

How do I make an HTML text box show a hint when empty?

Another option, if you're happy to have this feature only for newer browsers, is to use the support offered by HTML 5's placeholder attribute:

<input name="email" placeholder="Email Address">

In the absence of any styles, in Chrome this looks like:

Sample Image

You can try demos out here and in HTML5 Placeholder Styling with CSS.

Be sure to check the browser compatibility of this feature. Support in Firefox was added in 3.7. Chrome is fine. Internet Explorer only added support in 10. If you target a browser that does not support input placeholders, you can use a jQuery plugin called jQuery HTML5 Placeholder, and then just add the following JavaScript code to enable it.

$('input[placeholder], textarea[placeholder]').placeholder();

Raise tooltip for input, if empty value

The Problem

The main issue you are running into is that the .tooltip() method only initializes the tooltip setup (see documentation here). This is why the tooltip does not show up until you have clicked the button the first time, because that .click() creates it in the first place.

So what you would need to do to fix this would be:

Initialize the tooltip outside of the click handler
Modify the click handler to use the .tooltip("show") feature (docs)
Create a new handler to hide the tooltip as you see fit

Modified Snippet

I've included a new, modified snippet in which I give an example of how you might complete these 3 things and specifically an example of how you would hide the tooltip (my examples does it on re-click of the input).

JSFiddle Demonstration

// Initialize tooltip on #id_stock input$('#id_stock').tooltip({    title: "Please give some stock first.",    trigger: "manual"});
// Manually hide tooltip when re-clicking the input// This can be modified to hide the tooltip whenever you see fit$("#id_stock").click(function(e) {    $(this).tooltip("hide");});
$("#id_stock_btn").click(function() {  /* Act on the event */  if(!$('#id_stock').val())  {    $('#id_stock').tooltip("show");  // Show tooltip  }  else {    //Do Some Other Stuff  }  });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!--_____________All Required Header Files End____________________________-->
<label class="control-label" for="id_stock">Stock</label><button id="id_stock_btn" type="button" name="stock_btn">Create Stock</button><input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">

Can you you show a grey hint in an HTML text box with CSS alone?

The "placeholder" attribute is now supported across all major browsers.

<form>
<input type="text" placeholder="placeholder text">
</form>

Styling it still seems to require vendor prefixes:

input::-webkit-input-placeholder {
    color: #59e;
}    
input:-moz-placeholder {  
    color: #59e;  
}

Seen here: http://jsfiddle.net/webvitaly/bGrQ4/2/

showing tooltip if field(s) are empty on click

First, you should not use same ids to multiple elements. They must be unique. To handle same process for multiple elements, use class or data- attributes.

$('.form-control').tooltip({    trigger: "manual"});
$("#id_stock_btn").click(function(){    $(".form-control").each(function(){        if(!$(this).val())        {            $(this).tooltip("show");            return false;        }    });    });
$(".form-control").click(function(e) {    $(this).tooltip("hide");});

body {    margin: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<label class="control-label" for="id_stock">Stock</label><button id="id_stock_btn" type="button" name="stock_btn">Check form</button><input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Name" title=""><input type="number2" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Email" title=""><input type="number3" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Phone" title=""><input type="number4" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Address" title="">

HTML input field hint

You'd need attach an onFocus event to the input field via Javascript:

<input type="text" onfocus="this.value=''" value="..." ... />

how to show error note for only when a particular object value is empty in text field in reactjs

We will have to something like this.

import React from "react";
import { Grid, TextField, FormHelperText } from "@material-ui/core";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      details: [
        { id: "12wer1", name: "ABC", age: 15 },
        { id: "78hbg5", name: "FRE", age: 21 }
      ],
      errors: {
        name: {},
        age: {}
      }
    };

    this.onNameChange = this.onChange.bind(this, "name");
    this.onAgeChange = this.onChange.bind(this, "age");
  }

  onChange = (property, id, e) => {
    const value = e.target.value;
    let { details, errors } = this.state;
    details.forEach((d) => {
      if (d.id === id) {
        d[property] = value;
        errors[property][id] = value === "" ? `${property} is required` : "";
      }
    });

    console.log(errors);

    this.setState({
      details: details,
      errors: errors
    });
  };

  render() {
    return (
      <div className="App">
        {this.state.details.map((y) => (
          <Grid container justify="center" spacing={2}>
            <Grid item xs={3}>
              <TextField
                label="Name"
                name="dName"
                variant="outlined"
                value={y.name}
                onChange={(e) => this.onNameChange(y.id, e)}
              />
              <FormHelperText>
                {this.state.errors.name[y.id] || ""}
              </FormHelperText>
            </Grid>
            <Grid item xs={3}>
              <TextField
                label="Age"
                name="age"
                variant="outlined"
                value={y.age}
                onChange={(e) => this.onAgeChange(y.id, e)}
              />
              <FormHelperText>
                {this.state.errors.age[y.id] || ""}
              </FormHelperText>
            </Grid>
          </Grid>
        ))}
      </div>
    );
  }
}

We basically have to link each error's object with it's specific rendered element.
Here is the running code for the same: codesandbox