jquery - 用于渐变效果的引导工具提示

Question

我有 <p></p>具有线性渐变效果的元素。

https://jsfiddle.net/ah4j1dzr/

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

感谢任何帮助。

Answer 1

更改 div 元素的 gradient 然后在里面添加 span 并为其设置 % 宽度与您的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>