Animate a rotating tooltip without rotating text itself (CSS) - css

Question

I would like to create a tooltip which consists of a line that rotates around an icon when hovered, as the diagram below shows.
Rotation part is not difficult, but I am having trouble getting the text to stay parallel to the page. Any help, if possible with an example, would be much appreciated.
The closest I have come up with is:
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>