bootstrap 渐变效果的工具提示

Question

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

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

感谢任何帮助。

Answer 1

为 div 元素更改 gradient，然后在其中添加 span 并为其设置 % 宽度 same，如您的 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%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<div id="demo">
  <p class="one" data-toggle="tooltip" data-placement="top" title="test">This is for testing.</p>
  <span class="two"></span>
  <span class="three"></span>

</div>

Answer 2

就我收到的问题而言，我认为当有人将鼠标光标移动到  标签上时，您希望工具提示的背景颜色动态变化。

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

内的像素的颜色代码

我建议使用 canvas 代替  设计相同的功能，并使用自定义设计的 <div> 代替工具提示。因为在 canvas 你将能够得到这样的颜色代码 http://jsfiddle.net/DV9Bw/1/

bootstrap 渐变效果的工具提示

bootstrap tooltip for gradient effect

jquery

css

twitter-bootstrap-tooltip