asked on

Javascript mouseover / mouseout

Thank you for looking at my question,

I want to emulate a little bit of functionality that is a feature of this site. When the user allows the pointer to rest on a question title a little information box is displayed containing the question title text.

I have a couple of text input fields on an internal web page that will be populated by scanning a data matrix / QR code. The first element from the QR code will be displayed in the text box and other elements written to hidden fields.

When the user mouseover's(?) the text box I would like to display the associated information in a small box that closes on the mouseout event. How do I create the information box please?

Julian Hansen

What you are looking for is a tooltip

There is one available in the jQueryUI library here https://jqueryui.com/tooltip/

Bootstrap has one which you can see here https://getbootstrap.com/docs/3.3/javascript/#tooltips

W3Schools has a tutorial here https://www.w3schools.com/howto/howto_css_tooltip.asp
Code from the above replicated here

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Open in new window

Link to working version of the above here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip

Gary Croxford

ASKER

>>Julian Hansen
Julian,

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

Can I / How do I display the values of hidden input fields in the tooltip?

Julian Hansen

Can you explain a bit more - can you show me the markup that includes the hidden values?

Gary Croxford

ASKER

the element I want to add the tooltip to is the input text field id="SpigotNoRTD"

Data from a QR code is scanned to this text box, the value is passed to function jsHeatNo() which splits the text into its four component parts and assigns the component values to relevant input fields.

	echo '<td align="center">RTD<br/>';
		echo '<input type="text" size="10" id="SpigotNoRTD" OnChange="jsHeatNo()"/>';
		echo '<input type="hidden" id="SpigotRTDPONo"/>';
		echo '<input type="hidden" id="SpigotRTDDrgNo"/>';
		echo '<input type="hidden" id="SpigotRTDRevNo"/>';
	echo '</td>';

Open in new window

546358|550037704|5872869989|A001

Open in new window

	function jsHeatNo(){
		var HeatNoRTD = document.getElementById('SpigotNoRTD').value;
		
		if (HeatNoRTD.length > 0){
			var arrValues = HeatNoRTD.split("|");
			document.getElementById('SpigotNoRTD').value = arrValues[0];
			document.getElementById('SpigotRTDPONo').value = arrValues[1];
			document.getElementById('SpigotRTDDrgNo').value = arrValues[2];
			document.getElementById('SpigotRTDRevNo').value = arrValues[3];
		}
	}

Open in new window

My plan is that, after the QR code data has been broken out the values in the hidden input fields will be visible in a tooltip when the user passes the pointer over either the text box or the td element containing the textbox

Julian Hansen

So you want the tool tip to be a concatenation of the different values?

How does

function jsHeatNo(){

Open in new window

Get called - can you not just set the tooltip text there

$('.tooltip').text(HeatNoRTD);

Open in new window

Gary Croxford

ASKER

function jsHeatNo() is called from the OnChange event associated with
echo '<input type="text" size="10" id="SpigotNoRTD" OnChange="jsHeatNo()" OnMouseOver="jsMouseOverSpigotRTD()"/>';

I have created another javascript function jsMouseOverSpigotRTD()

      function jsMouseOverSpigotRTD(){
            var SpigotRTDPONo = document.getElementById('SpigotRTDPONo').value;
            var SpigotRTDDrgNo = document.getElementById('SpigotRTDDrgNo').value;
            var SpigotRTDRevNo = document.getElementById('SpigotRTDRevNo').value;

            var String = "PO No: " + SpigotRTPONo + "\nDrawing No: " + SpigotRTDDrgNo + "\nRev No: " + SpigotRTDRevNo;

            $('.tooltip').text(String);
      }

This construct is in my html code and I presume the $('.tooltip').text(String); should write the value of var String to this
      <div class="tooltip">
       <span class="tooltiptext" id="tooltipdata"></span>
      </div>

but it doesn't.

I don't really understand what I'm doing

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary Croxford

ASKER

Julian,
Your help has been invaluable, Thank you

Julian Hansen

You are welcome.