1

我想创建一个与屏幕边缘齐平的弹出菜单。似乎 popper 不喜欢这样，因为它总是强制留出 5px 的边距。我尝试将偏移量和填充值设置为 0，但它似乎不起作用。有没有办法做到这一点而不强迫它喜欢

margin-left: -5px !important

这是我包含的tippy选项和一个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
        }
      }
    ]
  },
});

如果我向按钮元素添加边距，则tippy 将像我想要的那样与边缘对齐。只有当我要求它与屏幕齐平时，它才会添加 5px 的 translationX

4

2 回答 2

1

您可以使用主题来完成。

JS：

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

CSS：

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

请注意额外.tippy-content的内容，因为填充位于.tippy-box.

于 2021-08-12T11:56:57.660 回答
0

您不必更改任何 CSS 样式。您只需将正确的选项传递给底层的 Popper.js：

popperOptions: {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 0,
      },
    },
  ],
},
于 2021-01-29T12:43:12.233 回答