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

Question

我有一个小下拉菜单：bootply

现在我的问题是我无法让悬停文本正常工作，我希望每当您将鼠标悬停在图标上时，菜单旁边都会出现文本，这样您就会得到一个小文本来显示您正在单击的内容，例如，在主页图标旁边，我希望文本出现 'home'，最好不要出现在内容之后。

这是我想要的示例：example

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

Answer 1

使用 title="your title" 如果图像然后使用 alt="your title" 将其显示为工具提示

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

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

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

Answer 3

您可能听说过 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 4

您在 Source 中提到的 工具提示 是使用 text-indent 创建的，这意味着

他们使用伪元素作为::after或::before[=49=创建了图标 ]
此外，他们还使用工具提示文本作为实际文本 <a href="" title="Account">Account</a> 和 ::hover

nav a:hover { text-indent: 0px; } 他们重置了 text-indent: 0px; 并通过赋予外观 n 感觉将该文本显示为工具提示。

但是您使用的是 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，尝试使用它，希望它能帮到您。

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

Dropdown menu show text on hover

css

jquery

hover

twitter-bootstrap

drop-down-menu

Bootply in action.