Question

我有一个小的下拉菜单：bootply

现在我的问题是我无法将onhover文本工作，我希望只要将鼠标悬停在图标上，就会在菜单旁边显示文本，因此您会得到一个小文本来显示您点击的内容，例如在主页图标旁边，我希望文字显示为“主页”，最好不要在内容之后。

这是我想要的一个例子：example

我真的希望有人可以帮我解决这个问题，如果我不够清楚，请告诉我如何让自己明白。

Answer 1

您可能听说过 CSS工具提示。以下是如何制作你的一个。

您可以使用data-*属性创建仅具有css3功能的工具提示。您需要稍微更改标记，或者我会说您需要向data-*元素添加li属性：

<div class="menu">
    <button type="button" class="btn btn-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fa fa-bars"></i>
    </button>
    <ul class="dropdown-menu arrow_box">
      <li data-tooltip="Info">
        <a href="#">
          <i class="fa fa-info hover-btn" ></i>
        </a>
      </li>
      <li data-tooltip="Cubes">
        <a href="#">
          <i class="fa fa-cubes hover-btn" ></i>
        </a>
      </li>
      <li data-tooltip="paint-brush">
        <a href="#">
          <i class="fa fa-paint-brush hover-btn" ></i>
        </a>
      </li>
      <li data-tooltip="paper-plane">
        <a href="#">
          <i class="fa fa-paper-plane hover-btn" ></i>
        </a>
      </li>
    </ul>
</div>

你需要有这个css：

.dropdown-menu>li{position:relative;}
.dropdown-menu>li[data-tooltip]:hover::after {
   content: attr(data-tooltip);
   position: absolute;
   left: 40px;
   top: 10px;
   min-width: 75px;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: 2px;
   background: white;
   padding: 3px;
   color: #000000;
   font-size: 11px;
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

Bootply in action.

Answer 2

使用title =＆＃34;你的头衔＆＃34;如果图像然后使用alt =＆＃34;你的标题＆＃34;你想要显示为工具提示

 <li>
        <a href="#">
          <i class="fa fa-info hover-btn" title="info"></i>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-cubes hover-btn" title="your title"></i>
        </a>
      </li>

Answer 3

我认为您正在寻找工具提示。我更喜欢Tooltipster，但还有很多其他选择。

$(document).ready(function() {
  $('.dropdown-toggle').tooltipster();
});

Answer 4

来源中引用的工具提示正在使用text-indent创建，这意味着

他们使用伪元素作为::after或::before

图标

此外，他们还将工具提示文本用作实际文本 <a href="" title="Account">Account</a>和::hover

nav a:hover { text-indent: 0px; }他们已重置text-indent: 0px;并将该文字显示为工具提示，方法是给予该感觉。

但是，您正在使用 font-awesome ，而且这个技巧在您的情况下无法使用。您可以使用默认工具提示或使用 jQuery 插件，例如Powertip，只需将title定义为：

       <a href="#" title="text 0">
          <i class="fa fa-info hover-btn"></i>
        </a>

进一步使用插件：

   $('.dropdown-menu>li a').powerTip({
     placement: 'e'});

这里是JSFiddle，

您可以轻松自定义此工具提示的UI，尝试使用此功能，希望能为您提供帮助。

下拉菜单显示悬停时的文本

4 个答案:

Bootply in action.