Change placement based on screen size

[fcanelo]

Hello,

I'm trying to change the placement of the tooltip based on screen size, but after reading the docs, I did not found how to accomplish this.

Let's say I have a default placement set to 'right'. How can I change the placement to, for example. 'bottom', after resizing the screen?

Thanks in advance!

[Akryum]

You can change the position by using the object notation described in the docs and you have an example in the demos.

[fcanelo]

Hi, thanks for your reply.

I do understand how to change the placement, but my problem is to do it based on screen size and on a global scale. I do not want to individually set the placement for each tooltip.

I have an resize event currently conigured on my Vuejs application, where I tried to change de default placement based on screen width, something like :

onResize(event) { if (window.innerWidth < 960) { VTooltip.options.defaultPlacement = 'bottom'; } },

But it doesn't change the placement of the tooltips.

It seems the tooltips take the default placement initially provided, and no longer take into account changes made to this property.

Can anyone provide me some guidelines on how to achieve this?

Many thanks!

[fcanelo]

I found a workaround .

I've created a mixin for managing tooltip stuff, where I defined a data object containing the tooltip placement. I've also added an resize screen event to be able to change the tooltip position based on screen size:

export default {
  data() {
    return {
      tooltipPlacement: 'right',
    };
  },
  methods: {
    onResize(event) {
      this.tooltipPlacement = window.innerWidth < 960 ? 'bottom' : 'right';
    }
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },

Then, simply import this mixin and provide the tooltipPlacement data property to the v-tooltip placement property like below:

<input type="number" v-tooltip="{ placement: tooltipPlacement }" >

Although this is not the perfect solution, because of the need to specify the tooltip placement for each tooltip, it's a nice workaround.

It would be nice in future versions, to be able to change the tooltip placement globally (maybe it already exists but I just couldn't find out how to do it).