Search code examples
htmlright-to-left

How does dir="auto" affect the tooltip created with title="example"?


If I create an HTML element with a tooltip, how does dir="auto" affect it? Is there a way to set the dir property of just the tooltip?

For example:

<div dir="ltr">
  <a
    href="#"
    title="1 اثنين 3"
  >abc</a>
  <br>
  <a
    dir="auto"
    href="#"
    title="1 اثنين 3"
  >abc</a>
  <br>
  <a
    href="#"
    title="1 اثنين 3"
    >عربية</a>
  <br>
  <a
    dir="auto"
    href="#"
    title="1 اثنين 3"
    >عربية</a>
  
</div>


Solution

  • According to my brief testing, this is how dir="auto" works with tooltips:

    The tooltip's direction is identical to the element's direction. If dir="auto", the element's direction is set automatically based on the contents of the element, and not based on the title attribute. So if the element's content begins with RTL characters, then the direction will be set to RTL for both the content of the element and for the tooltip. Conversely, if the element's content begins with LTR characters, then the direction will be set to LTR for both the content of the element and for the tooltip.

    You can see for yourself in the code snippet in the question post.

    There is no way to set dir="auto" for just the tooltip. I wish that dirtitle="auto" existed, but it doesn't.