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

Question

我有一个小下拉菜单:bootply

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

这是我想要的示例: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.