Question

我在右边的字段内联工具提示中有一个带glyphicon问号的表单：

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

全屏显示我需要：

但是在移动设备或小屏幕上，它只能在我的glyphicon标记内悬停一些非常小的区域并且工具提示覆盖它：

当我检查Chrome浏览器开发人员工具中的相应a元素时，它指向span元素之外的某个区域：

这是小提琴：https://jsfiddle.net/r2cm9c9u/

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

Answer 1

你可以用纯css做到这一点。

如果你有：

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

你不需要＆＃39; a＆＃39;首先。你可以用CSS做什么：

.tooltip-block span {
    display: none;
}

.tooltip-block:hover + span {
    display: block;
}

当你将鼠标悬停在.tooltip-block后面的span元素将显示块时，会发生什么。绝对不需要javascript来做这样的事情。

然后，如果您希望该工具提示可以点击，那么您可以使用javascript。

<div class="col-sm-3 tooltip-box">
            <input id="username" type="text" class="form-control" placeholder="username"/>
            <div class="row tooltip-block" onclick="doSomething()"><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>

Answer 2

我会将定位移动到实际链接，并使链接和glyphicon成为块元素：

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

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

并改变了你的课程：

.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

如何使用glyphicon作为超链接制作跨度？

2 个答案: