Tooltip Overpopulation Workaround
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<nav>
<ul>
<li><a href="#" class="tooltip" title="Edit settings like page title, slug, SEO tags, and more.">Page Settings</a></li>
<li><a href="#" class="tooltip" title="Change the layout for the page.">Page Layout</a></li>
<li><a href="#" class="tooltip" title="Update the colors on this page.">Page Styles</a></li>
<li><a href="#" class="tooltip" title="Change the theme for this page.">Page Theme</a></li>
<li><a href="#" class="tooltip" title="Change the security information for this page.">Page Security</a></li>
<li><a href="#" class="tooltip" title="View and revert to past changes to this page">Version History</a></li>
<li><a href="#" class="tooltip" title="View a report about traffic on this page.">Page Reports</a></li>
</ul>
</nav>
CSS
nav {
width:100%;
height:100%;
background:rgb(45, 62, 80);
}
ul,li {
width:100%;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
a {
text-transform:uppercase;
font-family:Arial, Helvetica, "sans serif";
text-decoration:none;
color:#FFFFFF;
display:inline-block;
width:200px;
text-align:center;
padding:5px 20px;
margin: 10px auto;
border: 2px solid rgba(255,255,255,.45);
transition: .75s all;
background-color: rgba(255,255,255,0);
}
a:hover {
border: 2px solid rgba(255,255,255,1);
background-color: rgba(255,255,255,.15);
}
JavaScript
$(".tooltip").each(function(idx, element) {
// We cycle through the elements using each() so that we can choose the element specifically that we wish to clean up afterward
var ele = $(element);
ele.tooltip({
"close": function(evt, ui) {
// Only get rid of extraneous elements. We'll keep the one that was creted last.
ele.data("ui-tooltip").liveRegion.children(":not(:last)").remove();
}
});
});