Back

Cultivating an Interactive Garden Tooltip Experience

Discover how to craft a tooltip that blooms like a garden when hovered, revealing a bouquet of interactive elements inspired by the art of botanical cultivation.

Component Explanation

Craft Your Interactive Garden Tooltip

Uncover the secrets to creating an enchanting tooltip reminiscent of a blooming garden, offering users a delightful interactive experience.

Introduction

Welcome to a magical journey where tooltips come alive like a blossoming garden. This article will guide you through crafting a tooltip with CSS animations and JavaScript interactions to create an immersive user experience.

HTML Structure

Our HTML structure includes a button element encasing a tooltip. This tooltip unfolds like petals of a flower when the button is hovered over.

        <div class="garden-container">
          <button class="garden-tooltip-button" aria-label="Garden Tooltip Button" onmouseover="expandGarden(event)" onmouseout="collapseGarden(event)">
            <span class="tooltip-icon" aria-hidden="true">🌸</span>
            <div class="garden-tooltip">
              <p>Explore the flora of this digital garden!</p>
              <ul>
                <li>🌷 Tulip</li>
                <li>🌻 Sunflower</li>
                <li>🌹 Rose</li>
              </ul>
            </div>
          </button>
        </div>

We utilize the <button> element for accessibility and assign proper aria-label for screen readers. The .garden-tooltip is hidden initially and only revealed upon interaction.

CSS Styling the Blossom

The CSS creates a visual delight with glass-like backgrounds and smooth transitions, aiming for a chic botanical feel.

        .garden-container {
          position: relative;
          display: inline-block;
          padding: 20px;
        }
        .garden-tooltip-button {
          border: none;
          background: none;
          cursor: pointer;
          position: relative;
        }
        .tooltip-icon {
          font-size: 24px;
          transition: transform 0.3s ease;
        }
        .garden-tooltip {
          position: absolute;
          top: 50%;
          left: 100%;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(8px);
          padding: 10px;
          transform: scale(0.8);
          transform-origin: left center;
          transition: opacity 0.3s ease, transform 0.3s ease;
          opacity: 0;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
          pointer-events: none;
        }
        .garden-tooltip-button:focus .tooltip-icon {
          transform: scale(1.2);
        }
        .garden-tooltip p, .garden-tooltip ul {
          margin: 0;
          font-size: 14px;
          list-style-type: none;
        }
        .garden-tooltip ul li {
          margin: 5px 0;
          font-weight: bold;
        }

The tooltip reveals itself smoothly with scale and opacity transitions, achieving a glassmorphic effect by blending blur effects and semi-transparent layers.

JavaScript for Interaction

The JavaScript manages expanding and collapsing the tooltip for an interactive experience, adding life to the design.

        function expandGarden(event) {
          const tooltip = event.currentTarget.querySelector('.garden-tooltip');
          tooltip.style.opacity = '1';
          tooltip.style.transform = 'scale(1)';
        }

        function collapseGarden(event) {
          const tooltip = event.currentTarget.querySelector('.garden-tooltip');
          tooltip.style.opacity = '0';
          tooltip.style.transform = 'scale(0.8)';
        }

These functions change the state of the tooltip on hover in and out, providing seamless interaction. Remember to use event.currentTarget to ensure the correct element is targeted.

Whole code

<div class="garden-container">
  <button class="garden-tooltip-button" aria-label="Garden Tooltip Button" onmouseover="expandGarden(event)" onmouseout="collapseGarden(event)">
    <span class="tooltip-icon" aria-hidden="true">🌸</span>
    <div class="garden-tooltip">
      <p>Explore the flora of this digital garden!</p>
      <ul>
        <li>🌷 Tulip</li>
        <li>🌻 Sunflower</li>
        <li>🌹 Rose</li>
      </ul>
    </div>
  </button>
</div>


<script>
function expandGarden(event) {
  const tooltip = event.currentTarget.querySelector('.garden-tooltip');
  tooltip.style.opacity = '1';
  tooltip.style.transform = 'scale(1)';
}

function collapseGarden(event) {
  const tooltip = event.currentTarget.querySelector('.garden-tooltip');
  tooltip.style.opacity = '0';
  tooltip.style.transform = 'scale(0.8)';
}
</script>

<style>
.garden-container {
  position: relative;
  display: inline-block;
  padding: 20px;
}
.garden-tooltip-button {
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}
.tooltip-icon {
  font-size: 24px;
  transition: transform 0.3s ease;
}
.garden-tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  padding: 10px;
  transform: scale(0.8);
  transform-origin: left center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.garden-tooltip-button:focus .tooltip-icon {
  transform: scale(1.2);
}
.garden-tooltip p, .garden-tooltip ul {
  margin: 0;
  font-size: 14px;
  list-style-type: none;
}
.garden-tooltip ul li {
  margin: 5px 0;
  font-weight: bold;
}

</style>

Cultivating an Interactive Garden Tooltip Experience

Component Explanation

Craft Your Interactive Garden Tooltip

Introduction

HTML Structure

CSS Styling the Blossom

JavaScript for Interaction

Whole code

Comments

More tooltips

Similar

See also