GlTooltip: Setting target to ref does not work
Problem to solve
Setting the target
property on GlTooptip
to a ref
does not work.
I followed the documentation to include a tooltip with HTML content, however the button does not show up when I include the tooltip code (also there was no vue error in the console). Have added a commented code here for reference.
gitlab!38513 (comment 391578421)
Example
<gl-button ref="button">Click me</gl-button>
<gl-tooltip :target="() => $refs.button">Hello world</gl-tooltip>
Expected behaviour
GlTooltip
should be able to accept a ref
as the target
like BTooltip
can https://bootstrap-vue.org/docs/components/tooltip#target
Actual behaviour
BTooltip
creates a console warning that it cannot find the target
.
[BootstrapVue warn]: tooltip - Unable to find target element in document.
Proposal
I suspect that the context for this
in "() => $refs.button"
is lost or wrong.
Saving the target
in a intermediate variable in GlTooltip
is one way to solve the issue:
props: {
target: {
type: [Function, Object, String],
required: false,
default: null,
}
},
computed: {
tooltipTarget() {
const { target } = this;
if (typeof target === 'function') {
return target()
}
return target;
}
},
...
<b-tooltip :target="tooltipTarget" ...