<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span>
<div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)">
</div>In the illustration below, there are multiple circles with varying radii. The text is positioned in the center of each circle; however, for the smaller circles, it appears to be off-center.
bubbleStyle(b, r) {
return {
'height': 15 + r/2 + 'px',
'width': 15 + r/2 + 'px',
'min-height': 28 + 'px',
'min-width': 28 + 'px',
'max-height': 65 + 'px',
'max-width': 65 + 'px',
'background-color': 'rgba(5, 117, 230,' + b/100 + ')',
'transform': 'scale(' + b ? b/100 : 0.09 + ')',
'position': 'relative',
'top': 15 - 25*r/100 + 'px',
// 'left' :3 + 'px'
}
}.question-number {
top: 25px;
position: absolute;
display: inline-block;
/* display: flex; */
left: 50%;
margin-left: -9px;
z-index: 2;
font-size: 12px;
}