Web Programming examples

Google Maps,AngularJS

Form ? tooltip with AngularJS

AngularJS ng-grid multiple column spanning for headers
  • AngularJS : 1.2.23
  • Bootstrap : 3.2.0
  • include file
  • angular.min.js,ui-bootstrap-tpls-0.11.0.min.js

Basic Form ? tooltip with AngularJS




Horizontal Form ? tooltip with AngularJS


<form role="form">
  <div class="form-group">
    <label>tooltip-left
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="left" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label>tooltip-right
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="right" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label>tooltip-bottom
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="bottom" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label>tooltip-top
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="top" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <input type="text" class="form-control" />
  </div>
</form>
<br />
<br />
<H4>Horizontal Form ? tooltip with AngularJS</H4>
<br />
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-4 control-label">tooltip-left
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="left" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <div class="col-sm-8">
      <input type="text" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label">tooltip-right
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="right" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <div class="col-sm-8">
      <input type="text" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label">tooltip-bottom
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="bottom" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <div class="col-sm-8">
      <input type="text" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label">tooltip-top
      <span class="glyphicon glyphicon-question-sign" 
        tooltip-placement="top" 
        tooltip="Form ? tooltip with AngularJS glyphicon glyphicon-question-sign" >
      </span>
    </label>
    <div class="col-sm-8">
      <input type="text" class="form-control" />
    </div>
  </div>
</form>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.