Skip to content

Commit

Permalink
feat(ld-tooltip): allow passing custom tether options to tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Apr 27, 2022
1 parent c72cfd8 commit 780c784
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 12 deletions.
8 changes: 8 additions & 0 deletions src/liquid/components/ld-tooltip/ld-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ export class LdTooltip {
/** The rendered HTML tag for the tooltip trigger. */
@Prop() tag = 'button'

/** Stringified tether options object to be merged with the default options. */
@Prop() tetherOptions = '{}'

/** Event type that triggers the tooltip */
@Prop() triggerType: 'click' | 'hover' = 'hover'

Expand Down Expand Up @@ -122,6 +125,10 @@ export class LdTooltip {
tooltipContent.forEach((node) => {
this.tooltipRef.appendChild(node)
})

let customTetherOptions = {}
customTetherOptions = JSON.parse(this.tetherOptions)

this.popper = new Tether({
attachment,
classPrefix: 'ld-tether',
Expand All @@ -134,6 +141,7 @@ export class LdTooltip {
element: this.tooltipRef,
target: this.triggerRef,
targetAttachment,
...customTetherOptions,
})
// Fixes a tether positioning bug
this.popper.enable()
Expand Down
25 changes: 13 additions & 12 deletions src/liquid/components/ld-tooltip/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,18 +234,19 @@ Tooltips provide additional information, mostly short paragraphs, and can be pla

## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `arrow` | `arrow` | Show arrow | `boolean` | `undefined` |
| `disabled` | `disabled` | Disable tooltip trigger | `boolean` | `undefined` |
| `hideDelay` | `hide-delay` | Delay in ms until tooltip hides (only when trigger type is 'hover') | `number` | `0` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `position` | `position` | Position of the tooltip relative to the trigger element (also affects the arrow position) | `"bottom center" \| "bottom left" \| "bottom right" \| "left bottom" \| "left middle" \| "left top" \| "right bottom" \| "right middle" \| "right top" \| "top center" \| "top left" \| "top right"` | `'top center'` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `showDelay` | `show-delay` | Delay in ms until tooltip shows (only when trigger type is 'hover') | `number` | `0` |
| `size` | `size` | The tooltip size (effects tooltip padding only) | `"sm"` | `undefined` |
| `tag` | `tag` | The rendered HTML tag for the tooltip trigger. | `string` | `'button'` |
| `triggerType` | `trigger-type` | Event type that triggers the tooltip | `"click" \| "hover"` | `'hover'` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `arrow` | `arrow` | Show arrow | `boolean` | `undefined` |
| `disabled` | `disabled` | Disable tooltip trigger | `boolean` | `undefined` |
| `hideDelay` | `hide-delay` | Delay in ms until tooltip hides (only when trigger type is 'hover') | `number` | `0` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `position` | `position` | Position of the tooltip relative to the trigger element (also affects the arrow position) | `"bottom center" \| "bottom left" \| "bottom right" \| "left bottom" \| "left middle" \| "left top" \| "right bottom" \| "right middle" \| "right top" \| "top center" \| "top left" \| "top right"` | `'top center'` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `showDelay` | `show-delay` | Delay in ms until tooltip shows (only when trigger type is 'hover') | `number` | `0` |
| `size` | `size` | The tooltip size (effects tooltip padding only) | `"sm"` | `undefined` |
| `tag` | `tag` | The rendered HTML tag for the tooltip trigger. | `string` | `'button'` |
| `tetherOptions` | `tether-options` | Stringified tether options object to be merged with the default options. | `string` | `'{}'` |
| `triggerType` | `trigger-type` | Event type that triggers the tooltip | `"click" \| "hover"` | `'hover'` |


## Methods
Expand Down

0 comments on commit 780c784

Please sign in to comment.