Question

我有个元素，该元素具有线性渐变效果。

所有百分比值动态应用。想知道，是否有任何方法可以显示标签在任何颜色的鼠标悬停时填充的每种颜色的引导工具提示。需要在工具顶部显示其他数据。做了大量研究，但没有找到任何解决方案。

感谢您的帮助。

Answer 1

将gradient更改为div元素，然后在其中添加span并为其设置%宽度same，如您的{{1} }

gradient

$(document).ready(function() {

  $(".one").tooltip({
    trigger: "hover"
  });

  function changeTextTooltip(elm, text) {

    $(elm).attr("data-original-title", text);
    $(elm).tooltip("show");

  }

  $("#demo").mouseleave(function() {
    $(".one").tooltip("hide");
    $(".one").attr("data-original-title", "test");

  });

  $(".one").hover(function() {
    changeTextTooltip(".one", "text")
  });

  $(".two").hover(function() {
    changeTextTooltip(".one", "text2")

  });

  $(".three").hover(function() {
    changeTextTooltip(".one", "text3")

  });

});

#demo {
  width: 500px;
  background: linear-gradient(to right, #073b4c 0%, #073b4c 50%, #118ab2 50%, #118ab2 80%, #06d6a0 80%, #06d6a0 100%);
  display: inline-flex;
}

.one {
  width: 50%;
}

.two {
  width: 30%;
}

.three {
  width: 20%;
}

Answer 2

据我所知，我想您希望有人在标签上移动鼠标光标时，工具提示的背景颜色会动态变化。

我认为您无法使用引导工具提示和来做到这一点。正如您在https://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp中看到的那样，没有这样的东西可以用来在工具提示呈现后动态更改它的背景颜色。此外，您还将无法获得鼠标光标当前位于内的像素的颜色代码。

我建议使用画布而不是和定制设计的<div>代替工具提示来设计相同的功能。因为在画布上，您将能够获得这样的颜色代码 http://jsfiddle.net/DV9Bw/1/

渐变效果的自举工具提示

2 个答案: