feat(aside): add optional tooltip on header

[nguyenlam123]

• Provide an opt-in tooltip on the header of the aside component.
• Can be added to the html via data-ts.tooltip property, for example:

<aside data-ts="Aside"
  id="aside-with-tooltip"
  data-ts.title="Aside Title with tooltip"
  data-ts.tooltip="My Tooltip">
  <div data-ts="Panel">
    <p>Aside content.</p>
  </div>
</aside>

• Can be added programmatically as displayed below

ts.ui.get('#myAside', function(aside) {
  aside.tooltip('tooltip');
});

, provided that the user has previously added an aside component with the id called myAside.

Tooltip appearance can be displayed in the gif below

[sebastianflorica]

Maybe consider adding data-ts.position="bottom" for a cleaner look

[nguyenlam123]

Not sure if I understand. The position of the tooltip is based on coordinates (x, y), link to implementation here:

tradeshift-ui/src/runtime/js/ts.ui/core/[email protected]/spirits/tooltip/ts.ui.TooltipSpirit.js

Line 55 in f7a30e0

var x = parseInt(this.left);

Do you mean to adjust left and top so it aligns to "bottom", documentation for tooltip here: https://ui.tradeshift.com/v12/#components/tooltip/? 🤔

[sebastianflorica]

@nguyenlam123 I mean to add this position param https://tradeshift.github.io/elements/?path=/story/ts-tooltip--default

[nguyenlam123]

Different repo 🤔 ? IIRC, this tooltip https://ui.tradeshift.com/v12/#components/tooltip doesn't support position.

[sebastianflorica]

I didn't think that they were that different, as features