Hover affect of tooltip also underlines text of content in span - html

Question

Edited:
I have a tooltip icon that when you hover over it brings up a box with information which is fine. However, I also want this to underline text inside the contents of a span tag but I can't seem to apply the css to do both I can only seem to get it to do one or the other.
Below is the code for the tooltip icon:
SCSS
.tooltip-region {
text-align: center;
background-color: blue;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
z-index: 8;
margin-left: 10px;
margin-top: 5px;
}
.tooltip-region::before {
content: '?';
font-weight: bold;
color: #fff;
}
.tooltip-region:hover p{
display: block;
transform-origin: 100% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.tooltip-region p{
display: none;
text-align: left;
background-color: blue;
padding: 20px;
width: 200px;
position: relative;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #fff;
font-size: 13px;
line-height: 1.4;
font-size: 16px;
font-family: sans-serif;
}
.tooltip-region p::before {
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color: blue;
left:10px;
top:-12px;
}
.tooltip-region p::after {
width:100%;
height:40px;
content:'';
position: relative;
top:-40px;
left:0;
}
html
<div class="grid-container">
<form action="#">
<div class="flexrow">
<div class="tooltip-region">
<p>Text</p>
</div>
</div>
</form>
</div>
The code for the span I want to highlight is this:
html
<div class="grid-item-2">
<pre id="terraCode">
region = "<span id="regionList" class="regionListUnderline"></span>"
</pre>
</div>
I have JavaScript code that autofills the content of the span which is why the code above has no text in it.
But the css I want to apply to the contents of the span when I hover over the tooltip is this:
SCSS
.regionListUnderline:hover {
border-bottom: 1px dotted black;
}
If anyone can see how I can apply the dotted line to the contents of the span when I hover over the tooltip icon would be very much appreciated!
Thanks

Answer 1

You can update the style via JavaScript. Therefore you would have to add this to your script (make sure that the dom content has loaded):
const handleMouseOver = () => {
const el = document.getElementById("regionList");
el.style.borderBottom = "1px dotted black";
};
const handleMouseLeave = () => {
const el = document.getElementById("regionList");
el.style.borderBottom = "none";
};
const [tooltip] = document.getElementsByClassName("tooltip-region");
tooltip.addEventListener("mouseover", handleMouseOver);
tooltip.addEventListener("mouseleave", handleMouseLeave);
This will only work if you have one element with the class tooltip-reqion because the code targets the first of occurance. If you have several this would need more logic.