Components-$154.lzx

<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>