всплывающая подсказка для эффекта градиента

Question

У меня есть <p></p> элемент, для которого есть эффект линейного градиента.

https://jsfiddle.net/ah4j1dzr/

Все процентные значения применяются динамически.Интересно, есть ли способ показать всплывающую подсказку для каждого цвета, который тег <p> заполняет при наведении мыши на любой цвет.Необходимо показать другие данные в инструментальной панели.Много исследовал, но не нашел решения.

Любая помощь приветствуется.

Answer 1

Насколько я получил ваш вопрос, я думаю, вы хотите, чтобы цвет фона всплывающей подсказки динамически менялся, когда кто-то перемещает курсор мыши на тег <p>.

Я не чувствую, что выбыть в состоянии сделать это, используя всплывающую подсказку и <p>.Как вы можете видеть здесь https://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp, нет такой вещи, с помощью которой вы можете динамически изменять цвет фона всплывающей подсказки после ее рендеринга.Более того, вы также не сможете получить цветовой код пикселя, на котором курсор мыши находится внутри <p>.

. Я бы предложил разработать такую ​​же функциональность, используя canvas вместо <p> и пользовательский <div> вместо всплывающей подсказки.Потому что на холсте вы сможете получить цветовой код, подобный этому http://jsfiddle.net/DV9Bw/1/

Answer 2

Измените gradient для элемента div, а затем добавьте 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>