Springboard

Input Tip 

<label for="inputid">label</label>
<input type="text" id="inputid" name="input" value="" placeholder="" aria-describedby="inputtip" />
<div id="inputtip">
    <span role="tooltip" class="input-tip">Optional tip normally shown directly below an input field.</span>
</div>
 
{{~ render '@input' input ~}}
<div id="{{ tip.id }}">
  <span role="tooltip" class="input-tip">{{ tip.text }}</span>
</div>
 
{
  "input": {
    "name": "input",
    "value": null,
    "type": "text",
    "id": "inputid",
    "ariaDescribedby": "inputtip",
    "label": {
      "for": "inputid",
      "text": "label"
    }
  },
  "placeholder": "placeholder",
  "tip": {
    "text": "Optional tip normally shown directly below an input field.",
    "id": "inputtip"
  }
}
  • Content: 
    .input-tip {
  display: block;
  padding: 0 .4em;
  margin: .5em 0 0;
  color: #777;
  font-size: 90%;
  font-family: $font-stack-form-ui;
}
  • URL: /components/raw/input-tip/_sass.scss
  • Filesystem Path: components/01-elements/03-form-controls/input-tip/_sass.scss
  • Size: 140 Bytes

Use input tips to offer tips or instructions to help users complete a form field.