CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
da1lbi3
da1lbi3

Reputation: 4519

Bootstrap tooltip

How can i add a tooltip on the first li? When i set class tooltip on the li, the complete li hides itself..

my 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();
});

Upvotes: 0

Views: 227

Answers (2)

DeadlyChambers
DeadlyChambers

Reputation: 5265

<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();
      });

Upvotes: 0

CodeLyfe
CodeLyfe

Reputation: 250

I'm a fan of CSS Tooltips personally, try this:

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

Upvotes: 3

Related Questions