Responsive positioning of custom Vue Tooltip (left, right, center)

Hi guys,

I’m building a custom tooltip component from scratch and am just having some trouble setting up it’s props for ‘left’, ‘right’, ‘center’ alignment under the tooltip trigger text. The issue is that when the window resizes down to a certain point, the tooltip needs to resize accordingly.

At the moment I have it working to some degree, but when you resize there is a tipping point where the tooltip just slightly spills over the right hand of the screen. It’s at this point where it needs adjusting … You can see I’m trying to figure it out with the following function in my Vue code:

Here’s a link to the sandbox -> https://codesandbox.io/s/xjq9ypzjqp?codemirror=1&fontsize=14

Here are some pics of what I mean

1.) Normal tooltip on large screen (works fine, but it’s coming close to the edge as I make the screen smaller)

  1. As I resize the tooltip gets cut off on the right hand side

responsiveWidth() {
      const standardWidth = {
        width: `${this.width}px`,
        position: "absolute",
        // left: `${this.tooltipDimensions.right >= this.windowWidth ? this.tooltipDimensions.left : 0}px`
      };
  

      const responsiveWidth = {
        width: `${this.windowWidth - 20}px`,
        position: "relative",
        left: "50%",
        top: '10px'
      };

      return ((this.width - 20) >= this.windowWidth) ? responsiveWidth : standardWidth;
    }

Thank you in advance!!! :slight_smile:

ToolTip.vue in responsiveWidth:

  const standardWidth = {
    ...
    left: 100 - (this.width / this.windowWidth) * 100 + "%"
    ...
  };

App.vue add in <style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
1 Like

That’s awesome!!! Thank you so much!