css - 如何使用 glyphicon 作为超链接创建跨度？

Question

我有一些带有 glyphicon 问号的表格，右边是字段内联 tooltip:

<div class="form-group required">
    <label for="username" class="col-sm-2 control-label">User Name:</label>
    <div class="col-sm-3 tooltip-box">
        <input id="username" type="text" class="form-control" placeholder="username"/>
        <div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
            <span class="glyphicon glyphicon-question-sign"></span></a>
        </div>
    </div>
</div>

全屏显示我需要的样子:

但在移动设备或小屏幕上，它只适用于悬停在我的字形标记内的一些非常小的区域，并且工具提示会覆盖它:

此外，当我在 Chrome 的开发者工具中检查相应的 a 元素时，它指向 span 元素之外的某个区域:

这是 fiddle :https://jsfiddle.net/r2cm9c9u/

如何使整个 span 都带有 glyphicon 作为工具提示的超链接？

Answer 1

我会将定位移动到实际链接并使链接和字形成为 block 元素:

我已经在下面的链接中添加了一个类

<div class="form-group required">
  <label for="username" class="col-sm-2 control-label">User Name:</label>
  <div class="col-sm-3 tooltip-box">
    <input id="username" type="text" class="form-control" placeholder="username" />
    <div class="row tooltip-block">
      <a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip." class="glyphicon-holder">
        <span class="glyphicon glyphicon-question-sign"></span></a>
    </div>
  </div>
</div>

并改变了你的类(class):

.tooltip-box .glyphicon-holder {
  position: absolute;
  top: 8px;
  right: 22px;
  font-size: 1.25em;
  display: block;
}

.tooltip-box .glyphicon-holder:hover {
    text-decoration: none;
}

.glyphicon.glyphicon-question-sign {
  color: gray;
  display: block;
}

Updated fiddle