Display text while hover on menu - html

Question

I've been working on my website using twitter bootstrap, and there's one thing that I'm probably not doing right.
I want to have some text to appear in the menu while I mouse hover on one of the links. Here's what I have:
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li>Back</li>
<li><a href="prev_page.html" class=""previous >Previous</a></li>
<li><a href="next_page.html" class="next" >Next</a></li>
<li><span class="shownext">View next</span></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar navbar-inverse-->
CSS:
.nav .shownext {
font-weight: normal;
font-style: italic;
font-size: 11px;
display: none;
}
.next:hover + .nav .shownext {
display: block;
}
Any help will be appreciated.

Answer 1

You can use tooltips to be fancy or just the title attribute:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li>Back</li>
<li><a href="prev_page.html" data-toggle="tooltip" data-placement="bottom" title="second tooltip" class=""previous >Previous</a></li>
<li><a href="next_page.html" data-toggle="tooltip" data-placement="top" title="third tooltip" class="next" >Next</a></li>
<li><span class="shownext" data-toggle="tooltip" data-placement="top" title="view next">View next</span></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar navbar-inverse-->
<script>$('li a').tooltip(options)</script>
Result

Answer 2

This is kinda what You asked. But since Your question wasn't to specific I don't think it's really what You wanted.
http://jsfiddle.net/xM6u9/1/
<div class="navbar">
<div class="navbar-inner"> <a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home
</li>
<li>Link
</li>
<li>Link
</li>
<li class="shownext">Next
</li>
</ul>
</div>
</div>
css:
.shownext { display: none; }
li:hover + .shownext { display: block; }
"Next" is showing up when You hover on last item.