How to display a js variable value in HTML,<div id> with mouseover effect

Question

In javascript I have a variable which contains some value which i get from JSON.

var a =recipe[0].step[1].processingTime;//here processing time is stored in var a

I want to display this value by showing a description box, when I hover my mouse over a small div id in HTML.

<tr>
    <td>Recipe 0</td>
    <td>
        <div id="p1"><div>
    </td>
</tr>

How to do that? Can anyone please show me a easy solution.

Which element should the mouse hover to display the description box? — Patrick Roberts
– Patrick Roberts, Commented Jan 22, 2016 at 23:36
You realize that when <div id="p1"></div> is empty, it will have a size of 0px x 0px and the mouse won't be able to hover over it. — Patrick Roberts
– Patrick Roberts, Commented Jan 22, 2016 at 23:38
well this div is created under a table.and the table cantain 40 more div. and each id of div has height:20px;padding-top:5px; — Mohammad Syeduzzaman
– Mohammad Syeduzzaman, Commented Jan 22, 2016 at 23:43

Patrick Evans · Accepted Answer · 2016-01-23 00:18:43Z

If you only want the simple native html tooltip you can just set the elements title atrribute. For example the ones that get shown when you hover over the SO voting arrows

document.getElementById("p1").setAttribute("title",recipe[0].step[1].processingTime);

Demo

var text = "13ms";

document.getElementById("p1").setAttribute("title",text);

#p1 {
  width:80px;
  height:80px;
  background:#323232;
}

<div id="p1"></div>

If however you are wanting a fancier one, you can do this with a little javascript and using css :hover, :after, attr css function, and the content property.

Give your div (or whatever element) a css class like below:

.withTooltip:hover:after {
   content:attr(data-tooltip);
   display:block;
   padding:10px;
   background:#323232;
   border-radius:4px;
   border:#000000;
   color:#FFFFFF;
}

:hover will cause the style to applied only when the element is hovered over.
:after will create a pseudo-element
conent you can use to set the text that the pseudo-element will display
attr will take the passed attribute name and get the value of that attribute

Then use javascript to set the attribute to your saved text (in this case using data-tooltip)

document.querySelector("p1").dataset.tooltip = recipe[0].step[1].processingTime;
//or
document.querySelector("p1").setAttribute("data-tooltip",recipe[0].step[1].processingTime);

Demo

var someData = ["13ms","100ms","8ms","67ms"];
var elements = document.querySelectorAll(".withTooltip");
for(var i=0; i<elements.length; i++){
  elements[i].dataset.tooltip = someData[i];
}

.box {
  width:50px;
  height:50px;
  background:#86DDFF;
  margin:10px;
  position:relative;
  display:inline-block;
}

.withTooltip:after {
  content:attr(data-tooltip);
  display:block;
  padding:10px;
  position:absolute;
  right:-40px;
  top:0px;
  background:#323232;
  border-radius:4px;
  border:#000000;
  color:#FFFFFF;
  opacity:0;
  transition:all 0.3s; 
  z-index:100;
  pointer-events:none;
}
.withTooltip:hover:after {
  opacity:1;
}

<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>

This should be accepted as an answer because it's really easier !

bob · Accepted Answer · 2016-01-23 00:11:59Z

0

Here's a vanilla javascript version:

var a = "something to show";

function showProcTime(elem) {
  elem.addEventListener("mouseout", clearProcTime);
  elem.innerHTML = '<div class="popupBox">' + a + '</div>';
  elem.style.backgroundColor = "#EFEFEF";
}

function clearProcTime(e) {
  var elem = e.target;
  elem.removeEventListener("mouseout", clearProcTime);
  elem.innerHTML = "";
  elem.style.backgroundColor = "#CCCCCC";
}

.popupBox {
  display: block;
  width: 200px;
  height: 20px;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #EFEFEF;
  border: 1px solid;
  padding: 10px;
}

<div id="p1" style="background-color:#CCCCCC;display:inline-block;width:200px;height:20px;" onMouseOver='showProcTime(this)'>roll over me
  <div>

edited Jan 23, 2016 at 0:11

answered Jan 23, 2016 at 0:00

bob

8,0232 gold badges51 silver badges44 bronze badges

Comments

guitarman · Accepted Answer · 2016-01-22 23:41:25Z

0

You could use jQuery:

var a =recipe[0].step[1].processingTime;
$('#p1').mouseenter(function(){
  $(this).html(a)
}).mouseout(function(){
  $(this).html('');
});

answered Jan 22, 2016 at 23:41

guitarman

3,3202 gold badges19 silver badges28 bronze badges

1 Comment

Mohammad Syeduzzaman Over a year ago

but the value does not show in a description box. like what Tooltip do.

Farjad Habib · Accepted Answer · 2016-01-22 23:48:38Z

0

Have you tried jquery hover method? http://www.w3schools.com/jquery/event_hover.asp

and if you are using simple javascript try this: http://www.w3schools.com/jsref/event_onmouseover.asp

answered Jan 22, 2016 at 23:48

Farjad Habib

1

1 Comment

Mohammad Syeduzzaman Over a year ago

Yes i tried, but all these examples shows how to pop up a value that is in html, like text or image. what I want is to pop up a value which i get from json and stored in a javascript variable.

steveben · Accepted Answer · 2016-01-23 00:43:44Z

0

I think this is simple:

<html>
<script>
    var a = 'the processing time you got from json';

    function displayTitle(e){
        e.title = a;
    }
</script>

<body>
    <table border>
        <tr>
            <td>Recipe 0</td>
            <td onMouseOver='displayTitle(this);'>
                <div id="p1"><div>
                    </td>
    </table>
</body>

answered Jan 23, 2016 at 0:43

steveben

465 bronze badges

Collectives™ on Stack Overflow

How to display a js variable value in HTML,<div id> with mouseover effect

5 Answers 5

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related