Question

我需要自定义我的工具提示，看起来像这样： example

但是，我正在动态构建它，并且需要使用文本向查找添加图像，因此我使用的是“内容”功能。当我尝试在jsfiddle中使用这个CSS时，箭头会搞砸，并且它会向图像中添加额外的内容。

 $(function () {
  $(document).tooltip({
      items: ".link",
      tooltipClass: "arrow",

      content: function () {


          var $this = $(this),
              random, html = "";
          var frame = "<div class='arrow1'>";
          var lowertext = "<div class ='tooltiptext'>Learn More</div>"
          var image = "<img class='webimage' src='https://i.ytimg.com/vi/ER0wkPWykNE/default.jpg'/>"
          return frame + image + lowertext + "</div>";

      }
  });
});

请在这里查看我的jsfiddle：

jsfiddle

Answer 1

See This Fiddle

基本上，我更改了以下样式规则，从箭头中删除了2个边框，更改了z-index，因此工具提示中的内容始终位于顶部，并删除了溢出：隐藏在箭头类中，因此箭头可以显示。所以这些规则：

  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -15px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
    border-bottom:none;
    border-right:none;
    z-index:-1;
  }

  .arrow {
    width: 170px;
    height: 170px;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }

jQuery工具提示使用内容自定义样式

1 个答案: