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>
</ul>

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

$('.tipnav').tipnav({
  'action_element': $('#SELECTOR')
});

4. Add your own CSS styles to the navigation.

[data-jqtipnav] {
background:#fff;
padding:.4em;
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.

$('.tipnav').tipnav({
  'action_element': $('#SELECTOR'),
  'fade_time': 200
});

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

$('.tipnav').tipnav({
  'action_element': $('#SELECTOR'),
  'fade_time': 200,
  'trigger_event': 'click'
});

Change log:

2016-02-05

• change default fade time to 500ms

2016-02-03

• fix positioning

2016-01-15

• 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.