2017-07-22 8 views
1

私は、ツールチップを表示するために、ホバー上のグリフコンアイコンを持つテキストフィールドを持っています。私はそのテキストフィールドの外にラベルを追加しました。その後、私はここで、テキストフィールドのサイズと高さの入力グループ - アドオンを編集するには

$("a.my-tool-tip").tooltip();
a.my-tool-tip, 
 
a.my-tool-tip:hover, 
 
a.my-tool-tip:visited { 
 
    color: black; 
 
} 
 

 
.input-group { 
 
    margin-top: 100px; 
 
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 

 
<div class="input-group"> 
 
    <label for="my-label">My Label</label> 
 
    <input type="text" class="form-control" name="security" id="security"> 
 
    <p class="unit">You msg here</p> 
 
    <span class="input-group-addon"> 
 
      <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Tooltip here"> 
 
       <i class='glyphicon glyphicon-info-sign'></i> 
 
      </a> 
 
     </span> 
 
    </input> 
 
    
 
</div>

答えて

1

を入力グループアドオンの高さを修正することができませんでした汚いソリューションです!

$("a.my-tool-tip").tooltip();
a.my-tool-tip, 
 
a.my-tool-tip:hover, 
 
a.my-tool-tip:visited { 
 
    color: black; 
 
} 
 

 
.input-group { 
 
    margin-top: 100px; 
 
} 
 

 
label[for="my-label"] { 
 
position: absolute; 
 
top: -30px; 
 
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 

 
<div class="input-group"> 
 
    <label for="my-label">My Label</label> 
 
    <input type="text" class="form-control" name="security" id="security"> 
 
    <span class="input-group-addon"> 
 
      <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Tooltip here"> 
 
       <i class='glyphicon glyphicon-info-sign'></i> 
 
      </a> 
 
     </span> 
 
    </input> 
 
</div>

はlable absolute

+1

が汚れソリューションをありがとうございました:)私は私の要件のわずかな変化を持っていることを確認します。入力後にpタグがあります。それをどうやって解決できるか。 –

+0

あなたの歓迎:)私は '絶対' 'p'タグも作っておくべきだと思います。 – Pedram

関連する問題