I created a unique component called ResultPill which includes a tooltip feature (implemented using vuikit). The text displayed in the tooltip is determined by a getter function called tooltip, utilizing vue-property-decorator. Here are the relevant parts of the code:
<template>
<div class="pill"
v-vk-tooltip="{ title: tooltip, duration: 0, cls: 'some-custom-class uk-active' }"
ref="container"
>
..content here..
</div>
</template>
<script lang="ts"&g t;
@Component({ props: ... })
export default class ResultPill extends Vue {
...
get tooltip (): string { ..calculating tooltip.. }
isContainerSqueezed (): boolean {
const container = this.$refs.container as HTMLElement | undefined;
if(!container) return false;
return container.scrollWidth != container.clientWidth;
}
...
</script>
<style lang="stylus" scoped>
.pill
white-space pre
overflow hidden
text-overflow ellipsis
...
</style>
I am currently working on adding additional content to the tooltip when the component's width exceeds that of its container, triggering overflow styles. I tried checking this with $0.scrollWidth == $0.clientWidth in the console (where $0 represents the selected element), but encountered issues with this.$refs.container being undefined for many component instances. Do I need to assign unique references per component instance? Are there any other problems with my current approach? How can I determine if the element is overflowing?
In an attempt to address the potential issue of non-unique refs, I added a random id property to the class:
containerId = 'ref' + Math.random();
and used it like so:
:ref="containerId"
>
....
const container = this.$refs[this.containerId] as HTMLElement | undefined;
However, this did not resolve the tooltip alteration problem.
Additionally, I explored using the $el property instead of refs, but encountered similar challenges. It appears that the root cause may be related to this:
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet!
$refsis also non-reactive, therefore you should not attempt to use it in templates for data-binding.
(presumably the same is applicable to $el) Therefore, I must find a way to recalculate the tooltip upon mounting. I came across this question, but the provided solution does not suit my scenario.