2

I want to create a popout menu that is flush with the edge of the screen. It seems like popper doesn't like this because it always forces a margin of 5px. I've tried setting offset and padding values to 0, but it doesn't seem to work. Is there a way to do this without forcing it like

margin-left: -5px !important

Here are the tippy options ive included and a JSFiddle:

https://jsfiddle.net/tbgwknpf/1/

  <div class="button">
    click me!
    
    <div id="menu-content">
      this is a tippy!
    </div>
    
  </div>
</div>

body {
  margin: 0;
}
.bar {
  height: 100px;
  width: 100%;
  background: coral;
}

.button {
  background: aquamarine;
  height: 100%;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

const menu = document.getElementById("menu-content");
menu.style.display = 'block';
tippy('.button',
{
    content: menu,
  allowHTML: true,
  interactive: true,
  trigger: 'click',
  hideOnClick: 'toggle',
  placement: 'bottom-start',
  offset: [0, 0],
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 0]
        }
      },
      {
        name: 'flip',
        options: {
          padding: 0,
          flipVariations: false
        }
      }
    ]
  },
});

If I add a margin to the button element, the tippy will align flush against the edge like I want it to. It is only when I ask it to be flush against the screen that it adds the translationX of 5px

not_shitashi
  • 281
  • 2
  • 4
  • 12

2 Answers2

2

You can do it using a theme.

JS:

tippy(targets, {
  theme: "your-theme",
});

CSS:

.tippy-box[data-theme~="your-theme"] .tippy-content {
  padding: 0;
}

Note the extra .tippy-content as the padding is in the child of .tippy-box.

simlmx
  • 999
  • 12
  • 17
1

You don't have to change any CSS styles. You just need to pass the right options to the underlying Popper.js:

popperOptions: {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 0,
      },
    },
  ],
},
livthomas
  • 1,160
  • 1
  • 14
  • 25