To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we look at how to customize tooltips.
Positioning
We can change the positing with modifiers for the v-b-tooltip to change the placement.
For example, we can write:
<template>
<div id="app">
<b-button v-b-tooltip.hover.bottomright title="Tooltip title">hover</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
#app {
height: 100vh;
width: 100vw;
margin: 50vw 50vh;
}
</style>
We have the bottomright prop so that the tooltip is placed to the bottom right of the button.
Focus Trigger
The focus trigger renders the a tag rather than the button tag.
So tabindex='0' must be included.
Therefore, we’ve to write:
<template>
<div id="app">
<b-button href="#" tabindex="0" v-b-tooltip.focus title="Tooltip">Link button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Disabled Elements
We can trigger a tooltip from a disable button by trigger it from its wrapper element instead.
For example, we can write:
<template>
<div id="app">
<span id="disabled" tabindex="0">
<b-button disabled>Disabled button</b-button>
</span>
<b-tooltip target="disabled">Disabled</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We put the id on the span instead of the b-button , so we can trigger the tooltip when we hover over the button.
b-tooltip Component Usage
We can style the content inside a tooltip if we use the b-tooltip component.
For example, we can write:
<template>
<div id="app">
<b-button id="tooltip">button</b-button>
<b-tooltip target="tooltip">Hello
<b>World</b>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We made the word ‘World’ bold with the b tag.
Variants and Custom Class
b-tooltip takes the variant prop to let us change the variant.
For example, we can write:
<template>
<div id="app">
<b-button id="tooltip">button</b-button>
<b-tooltip target="tooltip" variant="info">hello</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We set the variant to 'info' , so the tooltip is green.
Also, we can add the custom-class prop to set a custom class.
For instance, we can write:
<template>
<div id="app">
<b-button id="tooltip">button</b-button>
<b-tooltip target="tooltip" custom-class="tooltip">hello</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
.tooltip {
font-weight: bold;
}
</style>
Then the text in the tooltip is bold since we set the custom-class to 'tooltip' .
Show and Hide Tooltips Programmatically
We can set the show prop to show and hide a tooltip programmatically.
For example, we can write:
<template>
<div id="app">
<b-button @click="show = !show">button</b-button>
<b-button id="tooltip">button with tooltip</b-button>
<b-tooltip :show='show' target="tooltip" custom-class="tooltip">hello</b-tooltip>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
show: false
}
}
};
</script>
We have a button that toggles the show value.
The show prop is added to the b-tooltip so we can see the tooltip when show is true .
We can also submit the 'open' and 'close' events to open and close the tooltip.
For example, we can write:
<template>
<div id="app">
<b-button @click="open">open</b-button>
<b-button @click="close">close</b-button>
<b-button id="tooltip">tooltip button</b-button>
<b-tooltip target="tooltip" ref="tooltip">hello</b-tooltip>
</div>
</template>
<script>
export default {
name: "App",
methods: {
open() {
this.$refs.tooltip.$emit("open");
},
close() {
this.$refs.tooltip.$emit("close");
}
}
};
</script>
We assigned a ref to the b-tooltip component.
Also, we added the open and close method to emit the open and close events respectively.
That will open or close the tooltip.
Then when we click the open button, the tooltip will open beside the ‘tooltip button’ button.
When we click close, we close the tooltip.
Disable a Tooltip Programmatically
We can disable a tooltip with a prop or a ref event.
For example, we can write:
<template>
<div id="app">
<b-button id="tooltip">tooltip button</b-button>
<b-tooltip target="tooltip" disabled>hello</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
to disable the tooltip with the disable prop.
We can also disable a tooltip with the ref.
For example, we can write:
<template>
<div id="app">
<b-button [@click](http://twitter.com/click "Twitter profile for @click")="toggleDisable">toggle disable</b-button>
<b-button id="tooltip">tooltip button</b-button>
<b-tooltip ref="tooltip" target="tooltip">hello</b-tooltip>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
disabled: false
};
},
methods: {
toggleDisable() {
this.disabled = !this.disabled;
if (this.disabled) {
this.$refs.tooltip.$emit("disable");
} else {
this.$refs.tooltip.$emit("enable");
}
}
}
};
</script>
We can disable or enable the tooltip with the this.$refs.tooltip.$emit(“disable”); and this.$refs.tooltip.$emit(“enable”); calls respectively.
Therefore, the ‘toggle disable’ button will toggle the disabled status of the tooltip.
Conclusion
We can enable or disable a tooltip programmatically.
To do that, we can emit events or set props.
The positioning of the tooltip can also be changed.
