<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

# r-float

Floating positioning utility that anchors content relative to a trigger element. Used internally by `r-tooltip` to control placement and visibility of floating layer.

Example
```
<r-float trigger="#my-trigger" placement-y="bottom" placement-x="start">
  <div>Floating content</div>
</r-float>
```

## class: `RFloat`, `r-float`

### Fields

| Name         | Privacy | Type                            | Default    | Description                                                                                                                                                              | Inherited From |
| ------------ | ------- | ------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `anchorEl`   |         | `HTMLElement`                   |            |                                                                                                                                                                          |                |
| `arrow`      |         | `boolean`                       | `true`     | Defines if float has arrow pointing to trigger rendered                                                                                                                  |                |
| `offset`     |         | `number`                        | `8`        | Gap in pixels between the trigger element and the float box.                                                                                                             |                |
| `open`       |         | `boolean`                       | `false`    | Whether the float is currently visible.                                                                                                                                  |                |
| `placementX` |         | `"center" \| "left" \| "right"` | `'center'` | Preferred horizontal alignment of the float relative to the trigger.                                                                                                     |                |
| `placementY` |         | `"bottom" \| "top"`             | `'bottom'` | Preferred vertical side the float should appear on relative to the trigger.                                                                                              |                |
| `trigger`    |         | `string`                        |            | CSS selector (or bare `id`) of the trigger element the float should anchor to.<br>Supports any valid `document.querySelector` string, e.g. `"#my-btn"` or `"r-button"`. |                |

### Methods

| Name           | Privacy | Description                                                                                                                                                                                                                                                       | Parameters              | Return          | Inherited From |
| -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------- | -------------- |
| `hide`         |         | Hide the float.                                                                                                                                                                                                                                                   |                         | `Promise<void>` |                |
| `setAnchorRef` |         | Set anchor element reference for positioning.<br>This is intended for integrations that derive trigger elements from slot content.<br><br> Example:<br> \`const float = document.querySelector('r-float');`<br> \`await float.setAnchorRef(triggerElement);` | `anchorEl: HTMLElement` | `Promise<void>` |                |
| `show`         |         | Show the float.                                                                                                                                                                                                                                                   |                         | `Promise<void>` |                |
| `update`       |         | Force a recalculation of the float's position.<br>Useful after content changes that affect the box dimensions.                                                                                                                                                   |                         | `Promise<void>` |                |

### Events

| Name         | Type                | Description                             | Inherited From |
| ------------ | ------------------- | --------------------------------------- | -------------- |
| `rFloatHide` | `CustomEvent<void>` | Emitted when the float becomes hidden.  |                |
| `rFloatShow` | `CustomEvent<void>` | Emitted when the float becomes visible. |                |

### Attributes

| Name          | Field      | Inherited From |
| ------------- | ---------- | -------------- |
| `arrow`       | arrow      |                |
| `offset`      | offset     |                |
| `open`        | open       |                |
| `placement-x` | placementX |                |
| `placement-y` | placementY |                |
| `trigger`     | trigger    |                |

### CSS Parts

| Name      | Description                   |
| --------- | ----------------------------- |
| `content` | Wrap for the floating content |

### Slots

| Name | Description      |
| ---- | ---------------- |
|      | Floating content |

<hr/>

## Exports

| Kind                        | Name      | Declaration | Module | Package |
| --------------------------- | --------- | ----------- | ------ | ------- |
| `js`                        | `RFloat`  | RFloat      |        |         |
| `custom-element-definition` | `r-float` | RFloat      |        |         |