jQuery Plugin For Tooltip Style Floating Navigation - jQTipnav

File Size: 15.6 KB
Views Total: 806
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Tooltip Style Floating Navigation - jQTipnav

jQTipnav is a jQuery plugin for appending a tooltip-style, scrollable navigation bar to any html element that support both hover and click events.

How to use it:

1. Include jQuery library and the jQuery jQTipnav plugin on the webpage as usual.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jqtipnav.min.js"></script>

2. Create a navigation list.

<ul class="tipnav">
  <li><a href="">Menu  1</a> |</li>
  <li><a href="">Menu 2 </a> |</li>
  <li><a href="">Menu 3</a></li>

3. Append the navigation list to an action element (e.g. a tag) that triggers on hover.

  'action_element': $('#SELECTOR')

4. Add your own CSS styles to the navigation.

[data-jqtipnav] {
border:1px solid #000

[data-jqtipnav] ul { list-style-type: none }

[data-jqtipnav] ul, [data-jqtipnav] ul li {
  margin: 0;
  padding: 0;
  display: inline

[data-jqtipnav] ul li {
  font-size: .8em;
  padding: 3px 2px

[data-jqtipnav] ul li a {
  text-decoration: none;
  color: inherit

[data-jqtipnav] ul li a:visited { color: inherit }

[data-jqtipnav] ul li a:hover { text-decoration: underline }

5. Modify the default fade-out animation speed.

  'action_element': $('#SELECTOR'),
  'fade_time': 200

6. Change the default trigger event 'hover' to 'click'.

  'action_element': $('#SELECTOR'),
  'fade_time': 200,
  'trigger_event': 'click'

Change log:


  • change default fade time to 500ms


  • fix positioning


  • small code refactoring

This awesome jQuery plugin is developed by TvrtkoM. For more Advanced Usages, please check the demo page or visit the official website.