doc_html_tooltip_doorhanger-02.xhtml

Enable keyboard shortcuts

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/global.css"?>

<?xml-stylesheet href="chrome://devtools/skin/light-theme.css"?>

<window class="theme-light"

        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

        xmlns:html="http://www.w3.org/1999/xhtml"

        title="Tooltip test">

<vbox flex="1" style="position: relative">

  <!-- Towards the left -->

  <html:div class="anchor"

    style="width:10px; height: 10px; position: absolute; background: red;

    top: 0; left: 25px;">

  </html:div>

  <!-- Towards the left with RTL direction -->

  <html:div class="anchor"

    style="width:10px; height: 10px; position: absolute; background: red;

    top: 0; left: 50px; direction: rtl;">

  </html:div>

  <!-- Towards the right -->

  <html:div class="anchor"

    style="width:10px; height: 10px; position: absolute; background: red;

    bottom: 0; right: 25px;">

  </html:div>

  <!-- Towards the right with RTL direction -->

  <html:div class="anchor"

    style="width:10px; height: 10px; position: absolute; background: red;

    bottom: 0; right: 50px; direction: rtl;">

  </html:div>

  </vbox>

</window>