<section>
  <div class="w-container">
    <h1>A Demo using Tooltipster</h1>
    <h2>Webflow Core JS and CSS Loaded</h2>
    <p>Lorem <span class="tooltip" title="this is the .tooltip element tooltip text. ">ipsum dolor</span> sit amet consectetur adipisicing elit. Sapiente, explicabo deserunt asperiores eos ex voluptatum! Impedit quis praesentium explicabo! Dolorum sed aliquam
      quaerat id et molestiae quas accusamus officia cupiditate.</p>

    <p>Here is a read-only Webflow project configured with <em>tooltipster</em></p>
    <p class="links"><a href="https://preview.webflow.com/preview/tooltipster?utm_medium=preview_link&utm_source=designer&utm_content=tooltipster&preview=7255ea6b8fc2143eaad1ff3c1bb79d5c&mode=preview">tooltipster.webflow.io Read Only Link</a>
      <br>
      <a href="https://tooltipster.webflow.io">Tooltipster Demo published link</a>
    </p>
  </div>

</section>
section{
  margin-top: 50px;
  a{
    display:block;
    padding-top: 10px;
    
  }
  .links{
    background: #eaeaea;
    padding: 20px;
    a{
      color:#000
    }
  }
}
span.tooltip {color:blue}

/* Webflow default breakpoints */

@media screen and (max-width: 991px) {
/* Your responsive CSS */
}
@media screen and (max-width: 767px) {
/* Your responsive CSS */
}
@media screen and (max-width: 479px) {
/* Your responsive CSS */
}
View Compiled
$(document).ready(function() {
   
   // first on page load, initialize all tooltips
   $('.tooltip').tooltipster();

});
Run Pen

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/100903/webflow.css
  2. https://cdn.jsdelivr.net/npm/tooltipster@4.2.6/dist/css/tooltipster.bundle.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/100903/webflow.js
  3. https://cdn.jsdelivr.net/npm/tooltipster@4.2.6/dist/js/tooltipster.bundle.min.js