インラインガイド

見出しや入力のラベルにつけたアイコンからツールチップでガイドテキストを表示できます。
placeholderに表示するよりも詳しく具体的な例や解説を伝えたい場合に有効です。常時掲載の注釈のように視覚的な煩雑さでユーザーの体験を損ねることなく、表示をシンプルに保つことができます。

<!-- セクション見出し -->
<h5 class="inline-guide" id="inline-guide--1">インラインガイド付きのセクション見出し</h5>

<!-- ラベル -->
<div class="form-group">
  <label class="inline-guide" id="inline-guide--2">
    <span class="label-text">インラインガイド付きのラベル</span><span class="label-icon-guide" data-toggle="tooltip" data-html="true" title="インラインガイド"></span>
  </label>
  <input type="text" class="form-control" placeholder="プレースホルダー">
</div>

JavaScriptを追加します。

// JavaScript
$('.label-icon-guide[data-toggle=tooltip]').tooltip();

もしインラインガイドに画像<img />を含める場合は必ずwidth属性、height属性を指定してください。