CODEWITHSUNDEEP
javascripthtmljquery
SirBT
SirBT

Reputation: 1698

Why 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:

The rendered page that HTML code renders

Help! What am I missing or doing wrong?

Your help is appreciated.

Upvotes: 1

Views: 55

Answers (1)

0stone0
0stone0

Reputation: 43972

  1. Prevent multiple elements with the same ID 
    id="gear"
  2. Prevent elements with multiple ID's 
    id="toolbar-options gear"
  3. Add toolbar css CDN link (instead off local file) 
    <link hef="https://cdn.jsdelivr.net/gh/paulkinzett/[email protected]/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/[email protected]/jquery.toolbar.js"></script>
<link href="https://cdn.jsdelivr.net/gh/paulkinzett/[email protected]/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.

Upvotes: 1

Related Questions