Themes
You can create all kinds of custom funky themes for your tooltips with ease.
| Option | Default | Inputs | Role |
|---|---|---|---|
| theme | 'dark' | 'dark' 'light' 'translucent' 'gradient |
<button title="See through!"
v-tippy="{ arrow : true, animateFill: false, theme : 'translucent' }">
Translucent
</button>
1
2
3
4
2
3
4
<button title="Awesome colors!"
v-tippy="{ animateFill: false, theme : 'gradient' }">
Gradient
</button>
1
2
3
4
2
3
4
<button title="Cool huh?"
v-tippy="{ animateFill: false, theme : 'light bordered' }">
Light
</button>
1
2
3
4
2
3
4
Creating themes
Creating a theme for your tooltips is easy. If you wanted to make a theme called honeybee, then your CSS would look like:
.tippy-tooltip.honeybee-theme {
/* Your styling here. Example: */
background-color: yellow;
border: 2px solid orange;
}
1
2
3
4
5
2
3
4
5
Themes need the -theme suffix.
Style the arrow
To style the arrow, target the element with a tippy-arrow or tippy-roundarrow class:
.tippy-popper[x-placement^=top] .tippy-tooltip.honeybee-theme .tippy-arrow {
/* Your arrow styling here. */
}
1
2
3
2
3
In this example, the arrow is being styled when the tooltip placement begins with top. You will need to target a specific popper placement (top, bottom, left, right) because the arrow will change based on the placement.
Sharp arrows are CSS triangles which use the border trick, while round arrows are an SVG shape which can have their color changed with fill.
Style content directly
.tippy-tooltip.honeybee-theme .tippy-content {
/* Your styling here. Example: */
color: black;
}
1
2
3
4
2
3
4
Style the animateFill backdrop
.tippy-tooltip.honeybee-theme .tippy-backdrop {
/* Your styling here. Example: */
background-color: yellow;
}
1
2
3
4
2
3
4
Specify a theme
<button title="I'm a tooltip" v-tippy="{ theme : 'honeybee' }">
Honeybee theme
</button>
<style>
.tippy-tooltip.honeybee-theme {
background-color: yellow;
border: 2px solid orange;
color: black;
}
.tippy-popper[x-placement^='top']
.tippy-tooltip.honeybee-theme
.tippy-arrow {
border-top: 7px solid orange;
}
.tippy-popper[x-placement^='top']
.tippy-tooltip.honeybee-theme
.tippy-arrow::after {
content: '';
position: absolute;
top: -8px;
left: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid yellow;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Multiple themes
<button title="I'm a tooltip" v-tippy="{ theme : 'honeybee light' }">
Multiple themes
</button>
1
2
3
2
3