Permalink
Browse files

Allow a function as tooltip target attribute. (#1493)

  • Loading branch information...
michaelzangl authored and mosinve committed Feb 18, 2018
1 parent 65c19d9 commit 048c3d4f8fe78d7c77a73e4803613c75973e71d3
Showing with 17 additions and 6 deletions.
  1. +12 −4 src/components/tooltip/README.md
  2. +5 −2 src/mixins/toolpop.js
@@ -30,7 +30,8 @@ component **outside** of these types of components.
The target element **must** exist in the document before `<b-tooltip>` is mounted. If the
target element is not found during mount, the tooltip will never open. Always place
your `<b-tooltip>` component lower in the DOM than your target element.
your `<b-tooltip>` component lower in the DOM than your target element. This rule also applies
if a callback is used as target element, since that callback is called only once on mount.
**Note:** _When using the default slot for the title, `<b-tooltip>` transfers the
rendered DOM from that slot into the tooltip's markup when shown, and returns
@@ -135,12 +136,15 @@ by `focus`, and the user then clicks the trigger element, they must click it aga
```html
<b-container fluid>
<b-row>
<b-col md="6" class="py-4">
<b-col md="4" class="py-4">
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
</b-col>
<b-col md="6" class="py-4">
<b-col md="4" class="py-4">
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
</b-col>
<b-col md="4" class="py-4">
<b-btn ref="exButton3" variant="outline-success">Alternative chat</b-btn>
</b-col>
</b-row>
<!-- Tooltip title specified via prop title -->
@@ -150,6 +154,10 @@ by `focus`, and the user then clicks the trigger element, they must click it aga
<b-tooltip target="exButton2" placement="bottom">
Hello <strong>World!</strong>
</b-tooltip>
<!-- Tooltip for an element identified by ref -->
<b-tooltip :target="() => $refs.exButton3" title="Alternative!"></b-tooltip>
</b-container>
<!-- tooltip-component-1.vue -->
@@ -159,7 +167,7 @@ by `focus`, and the user then clicks the trigger element, they must click it aga
| Prop | Default | Description | Supported values
| ---- | ------- | ----------- | ----------------
| `target` | `null` | Element String ID, or a reference to an element or component, that you want to trigger the tooltip. **Required** | Any valid, in-document unique element ID, element reference or component reference
| `target` | `null` | Element String ID, or a reference to an element or component, or a function returning either of them, that you want to trigger the tooltip. **Required** | Any valid, in-document unique element ID, element reference or component reference or a function returning any such ID / reference
| `title` | `null` | Tooltip content (text only, no HTML). if HTML is required, place it in the default slot | Plain text
| `placement` | `top` | Tooltip position, relative to the trigger element. | `top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, `rightbottom`
| `triggers` | `hover focus` | Space separated list of event(s), which will trigger open/close of tooltip | `hover`, `focus`, `click`. Note `blur` is a special use case to close tooltip on next click, usually used in conjunction with `click`.
@@ -35,7 +35,7 @@ export default {
props: {
target: {
// String ID of element, or element/component reference
type: [String, Object, HTMLElement]
type: [String, Object, HTMLElement, Function]
},
delay: {
type: [Number, Object, String],
@@ -231,7 +231,10 @@ export default {
}
},
getTarget () {
const target = this.target
let target = this.target
if (typeof target === 'function') {
target = target()
}
if (typeof target === 'string') {
// Assume ID of element
return getById(target)

0 comments on commit 048c3d4

Please sign in to comment.