#110 - Tooltips for Webflow v0.1

Easily add Tippy.js tooltips to your Webflow site with attributes.

View demo project
View demo

<!-- 💙 MEMBERSCRIPT #110 v0.1 💙 - TOOLTIPS FOR WEBFLOW -->
<script>
  // Function to load Tippy.js, its CSS, and additional theme/animation CSS
  function loadTippy(callback) {
    // Load Tippy.js script
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/@popperjs/core@2';
    script.onload = function() {
      const tippyScript = document.createElement('script');
      tippyScript.src = 'https://unpkg.com/tippy.js@6';
      tippyScript.onload = function() {
        // Load Tippy.js CSS
        const cssFiles = [
          'https://unpkg.com/tippy.js@6/dist/tippy.css',
          'https://unpkg.com/tippy.js@6/themes/light.css',
          'https://unpkg.com/tippy.js@6/themes/light-border.css',
          'https://unpkg.com/tippy.js@6/animations/shift-away.css',
          'https://unpkg.com/tippy.js@6/animations/shift-toward.css',
          'https://unpkg.com/tippy.js@6/animations/scale.css',
          'https://unpkg.com/tippy.js@6/animations/perspective.css'
        ];
        
        let loadedCount = 0;
        cssFiles.forEach(file => {
          const link = document.createElement('link');
          link.href = file;
          link.rel = 'stylesheet';
          link.onload = function() {
            loadedCount++;
            if (loadedCount === cssFiles.length) {
              // Call the callback function when everything is loaded
              callback();
            }
          };
          document.head.appendChild(link);
        });
      };
      document.head.appendChild(tippyScript);
    };
    document.head.appendChild(script);
  }

  // Function to initialize Tippy tooltips
  function initializeTippyTooltips() {
    // Select all elements with any ms-code-tooltip-* attribute
    const elements = document.querySelectorAll('[ms-code-tooltip-top], [ms-code-tooltip-bottom], [ms-code-tooltip-left], [ms-code-tooltip-right], [ms-code-tooltip-content]');

    elements.forEach(element => {
      const tippyOptions = {};

      // Content and Placement
      if (element.hasAttribute('ms-code-tooltip-top')) {
        tippyOptions.content = element.getAttribute('ms-code-tooltip-top');
        tippyOptions.placement = 'top';
      } else if (element.hasAttribute('ms-code-tooltip-bottom')) {
        tippyOptions.content = element.getAttribute('ms-code-tooltip-bottom');
        tippyOptions.placement = 'bottom';
      } else if (element.hasAttribute('ms-code-tooltip-left')) {
        tippyOptions.content = element.getAttribute('ms-code-tooltip-left');
        tippyOptions.placement = 'left';
      } else if (element.hasAttribute('ms-code-tooltip-right')) {
        tippyOptions.content = element.getAttribute('ms-code-tooltip-right');
        tippyOptions.placement = 'right';
      } else if (element.hasAttribute('ms-code-tooltip-content')) {
        tippyOptions.content = element.getAttribute('ms-code-tooltip-content');
      }

      if (element.hasAttribute('ms-code-tooltip-placement')) {
        tippyOptions.placement = element.getAttribute('ms-code-tooltip-placement');
      }

      // Theme
      if (element.hasAttribute('ms-code-tooltip-theme')) {
        tippyOptions.theme = element.getAttribute('ms-code-tooltip-theme');
      }

      // Animation
      if (element.hasAttribute('ms-code-tooltip-animation')) {
        tippyOptions.animation = element.getAttribute('ms-code-tooltip-animation');
      }

      // Max Width
      if (element.hasAttribute('ms-code-tooltip-maxwidth')) {
        tippyOptions.maxWidth = parseInt(element.getAttribute('ms-code-tooltip-maxwidth'));
      }

      // Delay
      if (element.hasAttribute('ms-code-tooltip-delay')) {
        tippyOptions.delay = JSON.parse(element.getAttribute('ms-code-tooltip-delay'));
      }

      // Duration
      if (element.hasAttribute('ms-code-tooltip-duration')) {
        tippyOptions.duration = JSON.parse(element.getAttribute('ms-code-tooltip-duration'));
      }

      // Interactive
      if (element.hasAttribute('ms-code-tooltip-interactive')) {
        tippyOptions.interactive = element.getAttribute('ms-code-tooltip-interactive') === 'true';
      }

      // Arrow
      if (element.hasAttribute('ms-code-tooltip-arrow')) {
        tippyOptions.arrow = element.getAttribute('ms-code-tooltip-arrow') === 'true';
      }

      // Trigger
      if (element.hasAttribute('ms-code-tooltip-trigger')) {
        tippyOptions.trigger = element.getAttribute('ms-code-tooltip-trigger');
      }

      // Hide On Click
      if (element.hasAttribute('ms-code-tooltip-hideOnClick')) {
        tippyOptions.hideOnClick = element.getAttribute('ms-code-tooltip-hideOnClick') === 'true';
      }

      // Follow Cursor
      if (element.hasAttribute('ms-code-tooltip-followCursor')) {
        tippyOptions.followCursor = element.getAttribute('ms-code-tooltip-followCursor');
      }

      // Offset
      if (element.hasAttribute('ms-code-tooltip-offset')) {
        tippyOptions.offset = JSON.parse(element.getAttribute('ms-code-tooltip-offset'));
      }

      // Z-Index
      if (element.hasAttribute('ms-code-tooltip-zIndex')) {
        tippyOptions.zIndex = parseInt(element.getAttribute('ms-code-tooltip-zIndex'));
      }

      // Allow HTML
      if (element.hasAttribute('ms-code-tooltip-allowHTML')) {
        tippyOptions.allowHTML = element.getAttribute('ms-code-tooltip-allowHTML') === 'true';
      }

      // Touch
      if (element.hasAttribute('ms-code-tooltip-touch')) {
        const touchValue = element.getAttribute('ms-code-tooltip-touch');
        tippyOptions.touch = touchValue === 'true' || touchValue === 'false' ? (touchValue === 'true') : JSON.parse(touchValue);
      }

      // Initialize Tippy instance
      tippy(element, tippyOptions);
    });
  }

  // Wait for the DOM to be fully loaded, then load Tippy and initialize tooltips
  document.addEventListener('DOMContentLoaded', function() {
    loadTippy(initializeTippyTooltips);
  });
</script>

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

Join the 2.0 Slack
Version notes
Attribute
Beschreibung
Attribut
Keine Artikel gefunden.
Tutorial