Div title does not show complete string

Question

I have got a problem with the code snippet below. As you can see hovering over the "Hello" should show %Test%.Identification.CustomerNumber as a tooltip. The problem is that the first "%" letter is not shown in the tooltip, so there is only Test%.Identification.CustomerNumber in the tooltip.

.line-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
  direction: rtl
}

<div class="line-cut" title="%Test%.Identification.CustomerNumber">
   Hello
</div>

When I remove direction: rtl from my css it works perfectly and shows what it is supposed to. I have not found a solution or a workaround yet. I tried it with following browsers but the error occured on every browser. I listed the browsers and the versions I used in the table below

Browser	Version
Microsoft Edge	105.0.1343.33
Google Chrome	106.0.5249.62
Firefox	105.0.1

Can some help me to fix the problem or knows a workaround? Could this be a bug in the chromium and gecko engine? Please do not hesitate to comment for further information or questions.

Answer 1

Does this help? Using the Unicode LEFT-TO-RIGHT OVERRIDE, found here.

title="‪%Test%.Identification.CustomerNumber"

Answer 2

you can use Left-To-Right Embedding UniCode at first of your string, Unicode Hex Character Code ‪ learn more in this link.