HTML Tooltip messes with how word breaks-CodePudding

HTML

Without tooltip:
<div>
(<span >Hoverable text in here</span>)
</div>

With tooltip:
<div>
(<span >Hoverable text in here<span >random tooltip in here</span></span>)
</div>

CSS:

.tt {
    position: relative;
  color: red;
}

.ttt {
    visibility: hidden;
    width: 50px;
  position: absolute;
    margin-left: 25px;
}

.tt:hover .ttt {
    visibility: visible;
}

div {
  width: 150px;
}

https://jsfiddle.net/bf0arg1k/3/

It seems that html treats the parenthesis that come after the hidden span as if it is not attached to the last unhidden word.

I want the last parenthesis to stick to the last word. I could put the parenthesis inside of the span, but I want to have them be different colors.

I suppose I could put them inside the span and then put the parenthesis inside another span and apply css to them, but that seems like a pain.

Is there any better way of fixing this issue?

CodePudding user response：

put .ttt outside the text span.

.tt {
    position: relative;
  color: red;
}

.ttt {
    visibility: hidden;
    width: 50px;
  position: absolute;
    margin-left: 25px;
  color:red;
}

.tt:hover ~ .ttt {
    visibility: visible;
}

div {
  width: 150px;
}

Without tooltip:
<div>
(<span >Hoverable text in here</span>)
</div>

With tooltip:
<div>
(<span >Hoverable text in here</span>)
<span >random tooltip in here</span>
</div>