How to enable tooltip in inputs?

Question

I have the following Tooltip:

$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});

body {
	margin: 0; padding: 0;
	font: normal 12px Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	color: #333;
}
* {outline: none;}
img {border: none;}
h1 {
	font: 4em normal Georgia, 'Times New Roman', Times, serif;
	padding: 10px 0;
	color: #aaa;
	text-align: center;
}
h1 span { color: #666; }
h1 small{
	font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.65em;
	display: block;
	color: #666;
}
h1 a {text-decoration: none;}
a {color: #d60000; text-decoration: none;}

/*--Tooltip Styles--*/
.tip {
	color: #fff;
	background:#1d1d1d;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <a class="tip_trigger">
       sss     
        <span class="tip" style="top: 213px; left: 309px; display: none; ">sssssss</span> 
    </a>

<br><Br><br>
<input  type='text'  class="tip_trigger" id='inputNormal' name='nome'>

How do I make it work in input?

Answer 1

You can do it like this:

$('#mytext').popover();
$('#name').popover();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="container">
  <div class="row">
    <div class="col-md-10">
      <label for="mytext">My Text:</label>
      <input id="mytext" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="My popover content." />
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <label for="name">Name:</label>
      <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
  </div>
</div>

The magic is here:

data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Meu conteúdo"