How do I change a paragraph text when mouse hover over?

Question

How do I change the value of the second paragraph in the second div when hovering over it? making use of the class and not using ID's It should detect the one it's hovering over somehow, or thats what I think atleast.

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; /* Position the tooltip */ z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> <br> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> 

Answer 1

If you want to change the p tag text on hover use .hover function

 $(".tooltip").hover(function(){ $(this).find("p").text("Text is updated"); }) 

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; /* Position the tooltip */ z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> <br> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> 

Answer 2

You should add JS code something like below.

var element = document.getElementsByClassName('tooltip')[1];
element.addEventListener("mouseover", function (e) {
  this.oldText = this.innerHTML;
  this.innerHTML = "Hello World";
});
element.addEventListener("mouseout", function (e) {
  this.innerHTML = this.oldText;
});

Codepen

Answer 3

uhm, your question isnt clear ... but, i try...

<div class="tooltip">Hover over me
 <span class="tooltiptext">
   <p class="radio textchange"> Here is some data </p>
 </span>
</div>

and js

<script>
$(".textchange").on('mouseenter',function (){ //change text here })
</script>

I dont tried that, i wrote as I thought

Answer 4

Inside .hover() call back function, you can use .index() to check the index, based on which you can change the text of the paragraph:

 $('.tooltip').hover(function(){ var index = $('div.tooltip').index(this); if(index == 1) //check if current div is the second div, index are 0 based $(this).find('.radio').text('New text at position '+ index); }); 

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> <br> <div class="tooltip">Hover over me <span class="tooltiptext"> <p class=radio> Here is some data </p> </span> </div> 

Answer 5

There is a better way and more efficient to get tooltips in your HTML: using ::before or ::after pseudo elements.

In order to change the text of the second element I use 2 Javascript events: one on mouse over and other on mouse out:

 let tt = document.querySelectorAll(".ptooltip")[1]; tt.addEventListener("mouseover",()=>{ tt.textContent = "Thank you" }) tt.addEventListener("mouseleave",()=>{ tt.textContent = "Hover over me" }) 

 .ptooltip { position: relative; display: block; width: 7em; } .ptooltip::after { content: attr(data-tt); background: black; color: white; padding: 0.5em; border-radius: 0.3em; position: absolute; display: none; left: 7em; top: 0; width:8em; } .ptooltip:hover::after { display: block; } 

 <p>Move the mouse over the text below:</p> <p class="ptooltip" data-tt="Here is some data 1">Hover over me</p> <p class="ptooltip" data-tt="Here is some data 2">Hover over me</p> 

I hope you'll find useful.