Tooltips in colorblock theme

Technical Q&A
1

Hi, I’m using the Colorblock theme and would like to create tooltips for certain sections like text blocks. Is there a way to do so with css or should I find a way to work around that right away? Thanks!

2

Hi @ac-ado ,
You can absolutely add tooltips in the Colorblock theme - you don’t need an app for simple text-based tooltips. Shopify themes don’t include a built-in tooltip component, but you can create them easily using a small HTML snippet plus CSS.

Simple CSS-Only Tooltip (Recommended for text blocks)

  1. Edit the section or block where you want the tooltip
    – Add this HTML around your text:
<span class="tooltip-wrapper">
  Your text here
  <span class="tooltip-text">This is the tooltip info</span>
</span>
  1. Add this CSS in Online Store → Themes → Edit code → base.css:
.tooltip-wrapper {
  position: relative;
  cursor: help;
}

.tooltip-text {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity .2s ease;
  z-index: 10;
}

.tooltip-wrapper:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}
3

@ac-ado tooltip can be added using html and css, so little bit code tweaks are needed.

4

Hey,

Creating a tool-tip with the help of css only is not possible.

Because css is used for the styling purpose. It’s not be use to create the structures. Tooltip requires to create the structure. And this structure is only possible via the html and for the functionality it requires the JS.

So, in order to create the tooltip for the custom section, I requires your store collab code.

So that I can take a look and implement it.

Thanks