Bootstrap工具提示

Question

如何在第一个li上添加工具提示？当我在li上设置类工具提示时，完整的li隐藏了自己。

我的HTML：

<li><span class="fa-pencil-square-o sub"> </span> <p class="subMenu">Edit</p>
          <ul>
              <li></li>
              <li></li>
          </ul>
    </li>

JS：

$(document).ready(function() {
    $("a[rel='tooltip'], .tooltip").tooltip();
});

Answer 1

我个人喜欢CSS工具提示，试试这个：

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}

<li><span class="fa-pencil-square-o sub"> </span> <p class="subMenu">Edit</p>
          <ul>
              <li>
                 <a href="#" class="tooltip">
                    Tooltip
                    <span>
                    I'm a basic tooltip.
                    </span>
                 </a>
                  
              </li>
              <li></li>
          </ul>
    </li>

src：http://www.menucool.com/tooltip/css-tooltip

Answer 2

<li><span class="fa-pencil-square-o sub"> </span> <p class="subMenu">Edit</p>
      <ul id="listElement">
          <li></li>
          <li></li>
      </ul>
</li>

JS：

    $(function()
      {   $("#listElement li:first").tooltip();
      });