Calcite-components: Docs: Update the doc section for how to add a tooltip to `calcite-action-bar` expand action

[ethanbdev]

Description

with beta.52, this section of the doc no longer works:

<calcite-action-bar id="action-bar-test">
  <calcite-action text="Add" icon="plus"></calcite-action>
</calcite-action-bar>
<calcite-tooltip id="tooltip">Expand</calcite-tooltip>
<script>
  var actionBar = document.getElementById("action-bar-test");
  var tooltip = document.getElementById("tooltip");
  actionBar.tooltipExpand = tooltip;
</script>

It would be helpful to show the proper way to do this to help making the update to the new version, it was confusing to me.

Which Component

calcite-action-bar

cc: @driskull

[kevindoshier]

@ethanbdev - I had to make this change as well, its a slot for the expand tooltip, from the .52 changes list

action-bar, action-pad: Replace 'tooltipExpand' properties with 'expand-tooltip' slots (#1841) (38787d4)

[ethanbdev]

@ethanbdev - I had to make this change as well, its a slot for the expand tooltip, from the .52 changes list

action-bar, action-pad: Replace 'tooltipExpand' properties with 'expand-tooltip' slots (#1841) (38787d4)

Thanks @kevindoshier, so the tooltip needs to be appended to the action bar now instead of the document body?

[kevindoshier]

I think this should work

<calcite-action-bar id="action-bar-test">
  <calcite-tooltip slot="expand-tooltip">Expand</calcite-tooltip>
  <calcite-action text="Add" icon="plus"></calcite-action>
</calcite-action-bar>

[driskull]

Yes, that' is correct.

[ethanbdev]

I think this should work

<calcite-action-bar id="action-bar-test">
  <calcite-tooltip slot="expand-tooltip">Expand</calcite-tooltip>
  <calcite-action text="Add" icon="plus"></calcite-action>
</calcite-action-bar>

Thanks 😃

[ethanbdev]

Thanks @driskull 👍