tooltip.lzx

<library>

<include href="tooltipview.lzx"/>
<!--
    @devnote Individual tooltips are very lightweight, they contain
    only their text, a few parameters, and a handler for their
    parent's mouseover that causes the tooltipview to start thinking
    about displaying it.
-->
<class name="tooltip" extends="node" initstage="late">
    <!---
        The text that will be displayed by the tooltip.  If the text
        is <code>null</code> or empty, no tooltip will be displayed.
        You can use the CSS property <code>content</code> to set the
        text of a tooltip from a <code>stylesheet</code>
    -->
    <attribute name="text" type="text" style="content"/>
    <!---
        Called just before the tooltip might be displayed so that the
        <code>text</code> attribute can be updated (or set to the empty string, to
        inhibit displaying the tooltip).
    -->
    <method name="update"/>
    <!---
        The vertical offset of tooltip from the mouse position.
    -->
    <attribute name="yoffset" value="25"/>
    <!---
        Whether the tooltip is horizontally aligned by it's left edge
        (default) or right edge relative to the mouse position.

        @lzxtype right | left
    -->
    <attribute name="tipalign" value="left" type="string"/>
    <!---
        Whether the tooltip shows up above or below the mouse
        position. Default will position heuristically to keep
        the tooltip visible on the canvas.

        @lzxtype above | below | default
    -->
    <attribute name="tipvalign" value="default" type="string"/>

    <!--- @keywords private -->
    <handler name="onmouseover" args="ignore" reference="this.parent">
        this.update();
        if (this.text && (this.text != "")) {
          canvas.tooltipview.setAttribute('tooltip', this);
        }
    </handler>

    <doc>
      <tag name="shortdesc"><text>A floating "tooltip" for a view.</text></tag>
      <text>
        <p>
          The <classname>tooltip</classname> allows you to show a floating "tooltip" on any
          view.  To use it you make it a child of a view.  The parent view has
          to be clickable for the tooltip to work.  Setting clickable to false
          will disable the tooltip.
        </p>

        <example title="Tooltip">
<canvas height="60" layout="axis:y; spacing: 10">
  <text>Mouse over the button to see the tip</text>
  <button text="Button, button">
    <tooltip>Click or mouse out to hide tip</tooltip>
  </button>
</canvas>
        </example>

        <p>
          You can subclass <classname>tooltip</classname> and override
          the <code>update</code> method to create dynamic tooltips
        </p>

        <example class="program" title="Dynamic Tooltip">
<canvas height="180">
  <class name="timetip" extends="tooltip" with="formatter">
    <attribute name="formats" value="{us: '%2$d/%3$d/%1$d %4$02d:%02d:%02d', eu: '%1$4d-%2$02d-%3$02d %4$02d:%02d:%02d'}" />
    <method name="update">
      var now = new Date;
      this.setAttribute('text',
        this.formatToString(
          this.formats[locale.text],
          now.getFullYear(),
          now.getMonth(),
          now.getDay(),
          now.getHours(),
          now.getMinutes(),
          now.getSeconds()));
    </method>
  </class>

  <stylesheet>
    boxmodel { padding: 10 }
    tooltip { content: "Traditional tooltip" }
  </stylesheet>

  <view layout="axis:y; spacing: 25" with="boxmodel">
    <view layout="axis: x; spacing: 20">
      <button id="locale" onclick="this.setAttribute('text', this.text == 'us' ? 'eu' : 'us')">us</button>
      <text multiline="true" width="250">
        Click on the eu/us button to change locale.  Hover over the blue box to see a locale-dependent tooltip
      </text>
    </view>
    <view layout="axis: x; spacing: 20">
      <view width="75" height="75" bgcolor="blue" clickable="true">
        <timetip />
        <text fgcolor="white" valign="middle" align="center">Dynamic</text>
      </view>
      <view width="75" height="75" bgcolor="lime" clickable="true">
        <tooltip />
        <text fgcolor="white" valign="middle" align="center">Static</text>
      </view>
    </view>
  </view>
</canvas>
        </example>

        <p>
          The appearance of the tooltip is determined by the canvas.tooltipview element
        </p>

      </text>
    </doc>
</class>

</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2006-2011 Laszlo Systems, Inc. All Rights Reserved.               *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->