0
221
VistasWhy am I failing to get my JQuery tooltip to work?
I found this really cool Toolbar.js JQuery library that I would love to add to my application, though the instructions on the page seem pretty straightforward, I am having issues getting it to work.
Find below my simple HTML file put together as per instructions:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.toolbar.js"></script>
<link href="css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
});
</script>
</head>
<body>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning">
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<a href="#"><i class="fa fa-plane"></i></a>
<a href="#"><i class="fa fa-car"></i></a>
<a href="#"><i class="fa fa-bicycle"></i></a>
</div>
</body>
</html>
The browser console does not render any error messages. The HTML code renders the following image, but doesn't render the tooltips as desired:
Help! What am I missing or doing wrong?
Your help is appreciated.
1 Respuestas
Responde la pregunta0
- Prevent multiple elements with the same ID
id="gear" - Prevent elements with multiple ID's
id="toolbar-options gear" - Add toolbar css CDN link (instead off local file)
<link hef="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar@1.0.1/jquery.toolbars.css" rel="stylesheet"/>`
After fixing those issues, it still doesn't seem to work.
It's appears the
position: 'bottom'causes the error.Setting it to top works as you can see in this demo:
$('#gear').toolbar({ content: '#toolbar-options', position: 'top' });.hidden { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar@1.0.1/jquery.toolbar.js"></script> <link href="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar@1.0.1/jquery.toolbars.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <header> <h1>Testing toolbar.js</h1> </header> <div class="btn-toolbar btn-toolbar-warning" id="gear" > <i class="fa fa-cog"></i> </div> <div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary"> <a href="#"><i class="fa fa-plane"></i></a> <a href="#"><i class="fa fa-car"></i></a> <a href="#"><i class="fa fa-bicycle"></i></a> </div>
The error is thrown in getCoordinates which shows:
getCoordinates: function( position, adjustment) {
var self = this;
self.coordinates = self.$elem.offset();
if(position == 'top') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.width()/2),
top: self.coordinates.top-self.$elem.height()-adjustment,
}
}
if(position == 'left') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment,
top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.height()/2),
}
}
},
Since the function does not return anything if the value is bottom, it makes sense that an error is thrown.