Why Add Tooltips?

Adding tooltips to your BigCommerce store can enhance user experience by providing helpful information when they hover over an item. This can clarify functions or provide insights without cluttering the page.

Simple Tooltip Addition

Let’s start with a basic example of adding a tooltip in your BigCommerce CMS. This method involves simple HTML and CSS:

<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  </style>
  <span class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </span>
  

Integrating Tooltips in Product Descriptions

To incorporate tooltips into product descriptions within your BigCommerce site, follow these steps:

1. Access the BigCommerce dashboard.
2. Navigate to ‘Products’ and select a product to edit.
3. In the product description, insert your HTML code for the tooltip where appropriate.

Example:

Learn more about our <span class="tooltip">ingredients
    <span class="tooltiptext">This product contains nuts and dairy.</span>
  </span> here.
  

Advanced Tooltip Features

For more advanced features, such as styled tooltips or those that activate on click rather than hover, JavaScript or third-party libraries like Tooltipster can be used. JavaScript allows for greater interactivity:

<script>
  document.querySelector('.tooltip').addEventListener('click', function() {
    var tooltipText = this.querySelector('.tooltiptext');
    tooltipText.style.visibility = (tooltipText.style.visibility === 'visible') ? 'hidden' : 'visible';
  });
  </script>
  

Testing and Best Practices

After implementing your tooltips, it is crucial to test them across different devices and browsers to ensure compatibility and responsiveness. Keep tooltips concise and informative. Ensure that mobile users also have a smooth experience by possibly adjusting the activation method from hover to click on smaller screens.

By following the above steps and examples, you can successfully add interactive and helpful tooltips to your BigCommerce CMS, improving user engagement and providing vital information without overloading your pages.