CODEWITHSUNDEEP
javascripthtmlcss
Mohammad Syeduzzaman
Mohammad Syeduzzaman

Reputation: 13

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

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.

Upvotes: 1

Views: 2271

Answers (5)

steveben
steveben

Reputation: 46

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>

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42746

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>

Upvotes: 1

bob
bob

Reputation: 8005

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>

Upvotes: 0

Farjad Habib
Farjad Habib

Reputation: 1

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

Upvotes: 0

guitarman
guitarman

Reputation: 3320

You could use jQuery:

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

Upvotes: 0

Related Questions