鼠标悬停在右侧的图像

Question

当用户将鼠标悬停在 link 上时，我想显示一张图片。

示例：

<a href="/something">Some anchor text</a> with some extra text.

基本锚点，没有多余的装饰。

当用户将鼠标悬停在 link 上时，我想在 link 的右侧（或左侧）显示图像而不移动其他任何内容 .我试图找到一些 JSFiddle 示例或一些库来使用，但找不到任何东西。

期望的输出是这样的（但有一点耀斑）：

我试图让它与 DOM 的任何配置（不仅仅是文本）一起工作，并且我一直在解决推动文本或（作为副作用）重新排列的解决方案我的 div。我想尝试使用无框架 Bootstrap Popover，但我不知道如何设置单个弹出框场景的样式来做到这一点。

我 100% 不是 UI 人，所以我确定我的 Google search 措辞不正确。

Answer 1

知道了！

https://jsfiddle.net/90hLs1ae/

我结合使用 Tippy.js 和自定义 CSS 来控制 Tippy。

重要的一点是使背景颜色透明且边框为零：

CSS

.tippy-tooltip.i-be-testing-theme {
  border: 0;
  background-color: rgba(0, 0, 0, 0);
}

弹出设置

tippy(document.getElementById('i-am-link'),
      {
        content: template,
        arrow: false,
        placement: 'right',
        theme: 'i-be-testing'
      }
);

鼠标悬停在右侧的图像

Image to right on mouseover

jquery

bootstrap-popover