Getting tooltips to render using tooltipster?

332 Views Asked by At

I've been banging my head against the computer for the past couple hours as to how to customize tooltips using tooltipster. I'm currently doing:

head of index.html:

<head>

  <!--TOOLTIP CSS-->
  <link rel="stylesheet" type="type/css" href="node_modules/tooltipster-master/css/tooltipster.css">

  <!-- JQUERY -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

 <!-- TOOLTIP SCRIPT -->
 <script src="node_modules/tooltipster-master/js/jquery.tooltipster.min.js"></script>

  <script>

    $(document).ready(function() {

      $('.my-tooltip').tooltipster({
        theme: 'tooltipster-noir'
      });

    });

  </script>
</head>

body of index.html:

  <div class="my-tooltip" title="the message i want to tooltip out">Hover over me!</div>

The thing is that this still gives me the very basic tooltip without any color/theme/position changes. If you all have any experience with this, I'd love to hear it!

1

There are 1 best solutions below

3
On

You haven't loaded the css files - tooltipster.css