Shopify Dawn 主题 - 鼠标悬停时工具提示弹出文本

Question

我正在创建我的网站并使用来自 Shopify 的 Dawn 主题。

我想创建这里看到的效果 (https://www.silkelondon.com/pages/why-it-works)，其中我有这些带有小文本的编号圆圈，当我将鼠标悬停在圆圈上时，一个更具描述性的文本显示在它旁边。默认情况下，我希望选择第一个编号的圆圈并显示描述，即使我还没有点击它（正如我提到的那个网站上显示的那样）。

我尝试创建一个页面，我已经设法使用此代码使其工作，但它的格式不正确，并且缺少我在下面提到的一些内容并且无法完成：

<style><!--
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color:
  color:;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 200%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
--></style>
<div class="tooltip">NO EFFORT 
<h2>NO EFFORT</h2>
<p> </p>
<p> </p>
<span class="tooltiptext">Leave it in for just a few hours or overnight, to curl your hair while you sleep!</span></div>
<br /> <br /> <br /> <br /> <br />
<style><!--
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color:
  color:;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 200%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
--></style>
<div class="tooltip">NO HEAT = NO DAMAGE 
<h2>NO HEAT = NO DAMAGE</h2>
<p> </p>
<p> </p>
<span class="tooltiptext">Get the healthiest, biggest, bounciest curls you've ever had without any of the extreme damage caused by heated hair tools.</span></div>

仍然失踪和我需要帮助的事情：

1. 悬停文本全部在直列中，我希望它与上面的屏幕截图具有相同的外观。
2. 我希望 2 个按钮的悬停文本显示在同一位置。如果我创建第三个或更多按钮，我希望文本始终在多个按钮的相同位置弹出。
3. 我需要添加这些编号的圆圈，当我将鼠标移到它上面时，圆圈将被填充为黑色。尝试搜索但没有在网上找到任何解释。