JavaScript - Why won't my function hold anything longer than a few characters?

Question

<script>
    function hover(description) {
        console.log(description);
        document.getElementById('pricehover').innerHTML = description;
    }
</script>

I am using the above script to create a list that gives information on hover which appears to the right of the list. I use the following on list items within the HTML.

<li class="pricegrid" onmouseover="hover('<h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p>')">Pedicure Behandling</li>

And the description is added to the following div

<div id="pricehover">Hover over the items to the left to see the price and description.
</div>

My problem is that my description cannot hold more than a few characters when I want to, if possible, completely style the div content with a whole pageworth of description including images. Can anyone explain why this isn't working or possible and perhaps give me a way to do what I want to do?

Thankyou.

EDIT: I made a pen here. http://codepen.io/anon/pen/YXwwag

Answer 1

Check out this pen, I created.
No javascript
http://codepen.io/anon/pen/KpVVmM

ul{
  width:200px;
  display:block;
  position:relative;
}
.description{
  position:absolute;
  top:0;
  left:0;
  width:300px;

  transform:translate(200px,0);   
  border:1px solid #ccc;
  display:none;
}

li:hover > div.description{
  display:block;
}
   <ul>
  <li>Lorem ipsum.<div class='description'>Lorem ipsum dolor sit amet, consectetur.</div></li>
  <li>Maxime, cupiditate.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></li>
  <li>A, ratione.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas.</div></li>
  <li>Asperiores, labore?<div class='description'>Lorem ipsum dolor sit.</div></li>
  <li>Fugit, amet.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusamus?</div></li>
</ul>

Maybe dl>dt+dd is a better semantic markup for you, btw. http://www.w3schools.com/tags/tag_dl.asp

Answer 2

You can hide the content (any HTML markup) you want to show inside the li element itself in a hidden div, and then swap it into the right side div when you hover.

Codepen forked from yours - http://codepen.io/anon/pen/doGXeV

HTML (change li)

<li class="pricegrid" onmouseover="hover(this)">Pedicure Behandling<div><h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p></div></li>

JavaScript (change hover)

function hover(t) {
    document.getElementById('pricehover').innerHTML = t.childNodes[1].innerHTML;
}

CSS (class for hiding) - you could also just add it to the inline styles of the li's inner div, but that would be messy.

.pricegrid > div
{
  display: none;
}