I had the following code

Html example

<p>
  <span class="highlighting-tooltip>I BEAT COVID
    <span class="highlighting-tooltiptext">CAPITAL ERROR</span>
  </span>
</p>

CSS File

.highlighting-tooltip {
    position: relative;
    display: inline-block;
}
.highlighting-tooltip .highlighting-tooltiptext {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    margin-left: -90px;
    top:100%;
    margin-top:40px;
    user-select: none;
    z-index: 1;
}

.highlighting-tooltip:hover .highlighting-tooltiptext {
    visibility: visible;
}

In above the text "I BEAT COVID" is displayed in html and when hover with mouse pointer the tooltip is displayed. The problem is when I select this text "I BEAT COVID" and get the output of window.getSelection() then it also includes the text "CAPITAL ERROR"

I checked it is working fine in firefox and "CAPITAL ERROR" is not included only the chrome is giving this error. Is there any way in chrome to avoid this tooltip text to get included in window.getSelection() ?