37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
Vue.component('tt-tooltip', {
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
required: true,
|
|
default: 'Tooltip text'
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'top', // Options: top, bottom, left, right
|
|
validator: function (value) {
|
|
// The value must match one of these strings
|
|
return ['top', 'bottom', 'left', 'right'].indexOf(value) !== -1;
|
|
}
|
|
},
|
|
allowWrapping: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showTooltip: true
|
|
};
|
|
},
|
|
template: `
|
|
<div class="tt-tooltip-wrapper"
|
|
@mouseenter="showTooltip = true"
|
|
@mouseleave="showTooltip = false">
|
|
<slot></slot> <div v-if="showTooltip" class="tt-tooltip-box"
|
|
:style="{ whiteSpace: allowWrapping ? 'normal' : 'nowrap' }"
|
|
:class="['tt-tooltip-' + position]">
|
|
<div v-html="text.replaceAll('\\n', '<br>')"></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}); |