0

我正在为工具提示实现一个自定义 jquery 插件。当鼠标悬停在特定元素上时，此插件将显示一个工具提示框。我的工具提示块区域有一个指向基本元素的箭头。

我想将重复纹理图像应用于包括箭头在内的整个工具提示。我可以将图案图像分配给工具提示背景，但如何将其分配给箭头。

下图更说明了我的问题：

在此处输入图像描述

以下是箭头的代码：
HTML：

<div class="tooltip_outer">
  <div class="tooltip_arrow"></div>
  <div class="tooltip_txt">Tooltip content</div>
</div>

CSS：

.tooltip_outer {
  position: absolute;
  z-index: 5;
  background: #000000 url(images/pattern.png);
  padding: 0;
  margin: 5px 3px;
  width: 135px;
  box-shadow: 0 0 10px #999;
}
.tooltip_arrow {
  top: -14px;
  position: absolute;
  border: 7px solid transparent;
  display: inline-block;
  border-width: 7px;
  border-bottom-color: #000000;
  left: 50%;
}
.tooltip_txt {
  margin: 10px;
  color: white;
}

请指导我。提前致谢。

4

2 回答 2

1

有点晚了，但希望它对有同样问题的人有用。

我使用 scss 和属性 clip-path 制作了一个 codepen，您可以在其中设置箭头的方向、位置和大小，以及边框的大小（如果需要）。

https://codepen.io/onyphlax/pen/OJbpbGR

.tooltip {
  display: inline-block;
  padding: 4px;
  padding-bottom: calc(10px + 2px);
  background-color: fuchsia;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(10px + 2px)), calc(calc(50%) + calc(10px + 2px)) calc(100% - calc(10px + 2px)), calc(50%) 100%, calc(calc(50%) - calc(10px + 2px)) calc(100% - calc(10px + 2px)), 0 calc(100% - calc(10px + 2px)));
}
.tooltip__container {
  padding-bottom: 10px;
  margin-bottom: -6px;
  background-image: linear-gradient(to bottom right, cyan, purple);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0 calc(100% - 10px));
}
.tooltip__content {
  padding: 1rem;
  color: white;
}
<div class="tooltip">
  <div class="tooltip__container">
    <div class="tooltip__content">I'm a tooltip</div>  
  </div>
</div>

于 2021-02-15T15:05:34.350 回答
0

使用 CSS，您不能将背景图像应用于边框。边框旨在作为边框，而不是形状。

您可以使用旋转 45 度的 DIV 作为箭头，但在旧浏览器上会出现问题。

编辑：我发现了一个新的 CSS3 属性，用于将图案图像添加到边框，我认为这就是您正在寻找的：

http://www.vanseodesign.com/css/border-images/

于 2013-02-12T12:29:31.857 回答