2015-10-16 3 views
0

Как добавить всплывающую подсказку в первый ли? Когда я установить класс подсказку на литии, полный литий скрывается ..Bootstrap tooltip

моего HTML:

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

ЯШИ:

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

один 'li' с' span' или вложенная 'li' внутри него? – ochi

+0

Вы посмотрели документацию на сайте getbootstrap.com? – DeadlyChambers

ответ

3

Я поклонник 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

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

ЯШ:

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