动画旋转工具提示而不旋转文本本身（CSS）

Question

我想创建一个工具提示，其中包含一个在悬停时围绕图标旋转的线，如下图所示。

旋转部分并不困难，但我无法让文本与页面保持平行。如果可能的话，任何帮助都会非常感激。

我最接近的是：

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
}

svg {
  width: 256px;
  height: 256px;
}

svg > g {
  transform: translate(128px, 128px);
}

#ticks > line {
  stroke: white;
}

#hands {
  stroke: white;
  stroke-width: 4px;
  transform: rotate(-90deg);
}

#second, .label {
animation: handrotation 40s infinite alternate;
}

.label {
  transform-origin: -100px;
  position: relative;
  left: 50px;
}

#second > line {
  stroke: white;
  stroke-width: 1px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
    animation: dash 8s forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 00;
  }
}

@keyframes handrotation {
  to {
    transform: rotate(0.1turn);
  }
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g>
      <g id="second">
        <line x1="-12" y1="0" x2="120" y2="0"/> 
      </g>
           <span class="label">label</span>
    </g>
  </g>
</svg>