定义 popper 选项的问题答案

【问题标题】：Problems with defining popper options定义 popper 选项的问题
【发布时间】：2019-07-29 12:10:49
【问题描述】：

我目前在阻止我的工具提示离开视图时遇到问题。

这是我创建 Tooltip 实例的代码：

// The '+'-Button as seen on the screenshots below
const btn = document.getElementById('tooltip-btn')

new Tooltip(btn, {
    title: 'Add new product',
    trigger: 'hover',
    popperOptions: {
        modifiers: {
            // Docs even say that this is enabled by default
            preventOverflow: { enabled: true }
        }
    }
})

无论是否传递popperOptions 对象，工具提示仍将视图留在左侧。

现在的样子：

我希望它看起来如何：

我在创建工具提示时做错了什么还是我错过了弹出/工具提示选项？

这两个模块的当前 npm 版本是： "popper.js": "^1.15.0", "tooltip.js": "^1.3.2"

我们非常感谢任何帮助，如果您需要更多信息，请随时提出。提前致谢！

【问题讨论】：

您是否尝试过placement: 'top', // or bottom, left, right, and variations，如documentation 上所见...而preventverflow 将是preventoverflow
@chrispbacon 设置放置参数似乎对我的溢出问题没有任何影响。感谢您指出错字，遗憾的是它对我的问题没有影响:(
啊好的。看起来有点像定位问题

标签： javascript electron popper.js

【解决方案1】：

尝试偏移设置

let btn = document.querySelector("button")
new Tooltip(btn, {
  title: 'Add new product',
  trigger: 'hover',
  placement: "left-end",
  offset:"100,100",
  popperOptions: {
    modifiers: {
      offset: {
        enabled: true,
      }
    }
  }

})

<script src="https://unpkg.com/popper.js"></script>
<script src="https://unpkg.com/tooltip.js"></script>
<button class="button">Hover Me</button>

【讨论】：