-1

I have <p></p> element for which there is linear gradient effect.

https://jsfiddle.net/ah4j1dzr/

All the percentage values applied dynamically. Wondering, if there is any way to show bootstrap tooltip for each of the color that <p> tag is populating on mouse hover of the any color. Need to show other data in tooltop. Did a lot research, but didn't find any solution.

Any help is appreciated.

SandyK
  • 465
  • 1
  • 9
  • 28
  • The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable ([here's how to create one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). – Rory McCrossan Jan 29 '19 at 14:35
  • check the example below and tell us if that what you want :) – Aziz.G Jan 29 '19 at 16:19

2 Answers2

1

Change the gradient for a div element and then add span inside and set for it a % width same as in your 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>
Aziz.G
  • 3,599
  • 2
  • 17
  • 35
0

As far as I got your question, I think you want the background color of the tooltip to change dynamically when someone moves the mouse cursor on <p> tag.

I don't feel you'll be able to do that using bootstrap tooltip and <p>. As you can see here https://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp there is no such thing using which you can change the background color of the tooltip dynamically after it has been rendered. Moreover you'll also won't be able to get the color code of the pixel on which the mouse cursor currently is inside the <p>.

I'd suggest designing the same functionality using canvas instead of <p> and a custom designed <div> in place of tooltip. Because on canvas you'll be able to get the color code like this http://jsfiddle.net/DV9Bw/1/

Kartik Sorathiya
  • 1
  • 2