group-btnとgroup-addonの両方を持つ入力グループ

Question

ボタンで入力グループを使用してから、グリフコン上にツールチップ情報を持つアドオンを使用しようとしています。私は、最終結果がどのように見えるかのイメージを添付しました。入力フィールドとボタンとアドオンが同じ（ビジュアル）グループにないことがわかります。

これを実行する方法はありますか、別の解決策を選択する必要はありますか？

これ

は、画像に見られるような結果を生成するマークアップです：

<div class="form-group"> 
    <label class="control-label col-md-3" for="Employer_EmployerTitle">Employer</label> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input name="Employer.EmployerTitle" class="form-control text-box single-line valid" id="Employer_EmployerTitle" aria-invalid="false" style="text-transform: uppercase;" type="text" value="StackOverflow inc."> 
      <div class="input-group-btn"> 
       <button class="btn btn-success" id="btnModalSearch" onclick="EmployerSearchModalShow()" type="button">Search</button> 
      </div> 
      <span class="input-group-addon"> 
       <span title="" class="glyphicon glyphicon-info-sign" id="toolTipSpanEmployerSearch" data-original-title="Search Employers from local database." data-toggle="tooltip" data-placement="right"></span> 
      </span> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Employer.EmployerTitle"></span> 
    </div> 
</div> 

Answer 1

次

HTMLを試してみてください

<div class="form-group"> 
    <label class="control-label col-md-3" for="Employer_EmployerTitle">Employer</label> 
    <div class="col-md-6"> 
    <div class="input-group"> 
     <input name="Employer.EmployerTitle" class="form-control text-box single-line valid" id="Employer_EmployerTitle" aria-invalid="false" style="text-transform: uppercase;" type="text" value="StackOverflow inc."> 
     <div class="input-group-btn"> 
     <button class="btn btn-success" id="btnModalSearch" onclick="EmployerSearchModalShow()" type="button">Search</button> 
     <button class="btn btn-default"> 
      <span title="" class="glyphicon glyphicon-info-sign" id="toolTipSpanEmployerSearch" data-original-title="Search Employers from local database." data-toggle="tooltip" data-placement="right"></span> 
     </button> 
     </div> 

    </div> 
    </div> 
    <div class="col-md-3"> 
    <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Employer.EmployerTitle"></span> 
    </div> 
</div> 

Fiddle