Skip to content

Commit

Permalink
docs: options.placement only accepts string (#660)
Browse files Browse the repository at this point in the history
  • Loading branch information
piglovesyou authored and FezVrasta committed Jul 28, 2018
1 parent d01f868 commit 10ba2e9
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 41 deletions.
22 changes: 3 additions & 19 deletions docs/_includes/tooltip-documentation.md
Expand Up @@ -12,7 +12,6 @@
* [.toggle()](#Tooltip+toggle)
* [.updateTitleContent(title)](#Tooltip+updateTitleContent)
* _static_
* [.PlacementFunction](#Tooltip.PlacementFunction) ⇒ <code>String</code>
* [.TitleFunction](#Tooltip.TitleFunction) ⇒ <code>String</code>

<a name="new_Tooltip_new"></a>
Expand All @@ -26,15 +25,13 @@ Create a new Tooltip.js instance
| --- | --- | --- | --- |
| reference | <code>HTMLElement</code> | | The DOM node used as reference of the tooltip (it can be a jQuery element). |
| options | <code>Object</code> | | |
| options.placement | <code>String</code> \| <code>PlacementFunction</code> | <code>top</code> | Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)` |
| options.placement | <code>String</code> | <code>&#x27;top&#x27;</code> | Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)` |
| options.arrowSelector | <code>String</code> | <code>&#x27;.tooltip-arrow,</code> | .tooltip__arrow' - className used to locate the DOM arrow element in the tooltip. |
| options.innerSelector | <code>String</code> | <code>&#x27;.tooltip-inner,</code> | .tooltip__inner' - className used to locate the DOM inner element in the tooltip. |
| options.container | <code>HTMLElement</code> \| <code>String</code> \| <code>false</code> | <code>false</code> | Append the tooltip to a specific element. |
| options.delay | <code>Number</code> \| <code>Object</code> | <code>0</code> | Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `{ show: 500, hide: 100 }` |
| options.html | <code>Boolean</code> | <code>false</code> | Insert HTML into the tooltip. If false, the content will inserted with `textContent`. |
| options.placement | <code>String</code> \| <code>PlacementFunction</code> | <code>&#x27;top&#x27;</code> | One of the allowed placements, or a function returning one of them. |
| [options.template] | <code>String</code> | <code>&#x27;&lt;div class=&quot;tooltip&quot; role=&quot;tooltip&quot;&gt;&lt;div class=&quot;tooltip-arrow&quot;&gt;&lt;/div&gt;&lt;div class=&quot;tooltip-inner&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;</code> | Base HTML to used when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner` or `.tooltip__inner`. `.tooltip-arrow` or `.tooltip__arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class. |
| options.arrowSelector | <code>String</code> | <code>'.tooltip-arrow, .tooltip__arrow'</code> | selector used to locate the DOM inner element in the tooltip (useful if you pass a custom <code>options.template</code>) |
| options.innerSelector | <code>String</code> | <code>'.tooltip-inner, .tooltip__inner'</code> | selector used to locate the DOM arrow element in the tooltip (useful if you pass a custom <code>options.template</code>) |

| options.title | <code>String</code> \| <code>HTMLElement</code> \| <code>TitleFunction</code> | <code>&#x27;&#x27;</code> | Default title value if `title` attribute isn't present. |
| [options.trigger] | <code>String</code> | <code>&#x27;hover focus&#x27;</code> | How tooltip is triggered - click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. |
| options.boundariesElement | <code>String</code> \| <code>HTMLElement</code> | | The element used as boundaries for the tooltip. For more information refer to Popper.js' [boundariesElement docs](https://popper.js.org/popper-documentation.html) |
Expand Down Expand Up @@ -77,19 +74,6 @@ Updates the tooltip's title content
| --- | --- | --- |
| title | <code>String</code> \| <code>HTMLElement</code> | The new content to use for the title |

<a name="Tooltip.PlacementFunction"></a>

### Tooltip.PlacementFunction ⇒ <code>String</code>
Placement function, its context is the Tooltip instance.

**Kind**: static typedef of [<code>Tooltip</code>](#Tooltip)
**Returns**: <code>String</code> - placement - One of the allowed placement options.

| Param | Type | Description |
| --- | --- | --- |
| tooltip | <code>HTMLElement</code> | tooltip DOM node. |
| reference | <code>HTMLElement</code> | reference DOM node. |

<a name="Tooltip.TitleFunction"></a>

### Tooltip.TitleFunction ⇒ <code>String</code>
Expand Down
4 changes: 1 addition & 3 deletions packages/tooltip/index.d.ts
@@ -1,7 +1,5 @@
import { Boundary, Placement, PopperOptions } from 'popper.js';

export type PlacementFunction = (tooltip: HTMLElement, reference: HTMLElement) => string;

export type TitleFunction = () => string;

export type Delay = Record<'show' | 'hide', number>;
Expand All @@ -10,7 +8,7 @@ export interface Options {
container?: HTMLElement | string;
delay?: number | Delay;
html?: boolean;
placement?: Placement | PlacementFunction;
placement?: Placement;
template?: string;
title?: string | HTMLElement | TitleFunction;
/**
Expand Down
12 changes: 1 addition & 11 deletions packages/tooltip/src/index.js
Expand Up @@ -21,7 +21,7 @@ export default class Tooltip {
* @class Tooltip
* @param {HTMLElement} reference - The DOM node used as reference of the tooltip (it can be a jQuery element).
* @param {Object} options
* @param {String|PlacementFunction} options.placement=top
* @param {String} options.placement='top'
* Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end),
* left(-start, -end)`
* @param {String} options.arrowSelector='.tooltip-arrow, .tooltip__arrow' - className used to locate the DOM arrow element in the tooltip.
Expand All @@ -32,7 +32,6 @@ export default class Tooltip {
* If a number is supplied, delay is applied to both hide/show.
* Object structure is: `{ show: 500, hide: 100 }`
* @param {Boolean} options.html=false - Insert HTML into the tooltip. If false, the content will inserted with `textContent`.
* @param {String|PlacementFunction} options.placement='top' - One of the allowed placements, or a function returning one of them.
* @param {String} [options.template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>']
* Base HTML to used when creating the tooltip.
* The tooltip's `title` will be injected into the `.tooltip-inner` or `.tooltip__inner`.
Expand Down Expand Up @@ -448,15 +447,6 @@ export default class Tooltip {

}

/**
* Placement function, its context is the Tooltip instance.
* @memberof Tooltip
* @callback PlacementFunction
* @param {HTMLElement} tooltip - tooltip DOM node.
* @param {HTMLElement} reference - reference DOM node.
* @return {String} placement - One of the allowed placement options.
*/

/**
* Title function, its context is the Tooltip instance.
* @memberof Tooltip
Expand Down
10 changes: 2 additions & 8 deletions packages/tooltip/tests/types/type-tests.ts
@@ -1,10 +1,4 @@
import Tooltip, { PlacementFunction, TitleFunction , Options as TooltipOptions, Delay} from 'tooltip.js';

const placementfn: PlacementFunction = (tooltip, reference) => {
tooltip.focus();
const x = reference.offsetWidth + 5;
return 'asdf';
};
import Tooltip, { TitleFunction , Options as TooltipOptions, Delay} from 'tooltip.js';

const titlefn: TitleFunction = () => 'asdf';

Expand All @@ -17,7 +11,7 @@ const options: TooltipOptions = {
container: 'container',
delay,
html: true,
placement: placementfn,
placement: 'top',
template: 'I am the template',
title: titlefn(),
trigger: 'any string is valid here',
Expand Down

0 comments on commit 10ba2e9

Please sign in to comment.