html - Bootstrap 工具提示

Question

如何在第一行添加工具提示？当我在 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>

来源:http://www.menucool.com/tooltip/css-tooltip