如何编辑高度输入组插件

Question

我有一个带有字形图标的文本字段，悬停时显示工具提示。我在该文本字段之外添加了一个标签。之后我无法使用文本字段的大小修复输入组插件的高度

$("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>

Answer 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>

制作标签absolute