WIP

by wizviper

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div id="container">
  <h1>Satisfaction Clicker</h1>
  <div id="resources">
    <h2>Gold:0</h2>
  </div>
  <div id="buildings">
    <button class="btn btn-default" id="goldmine">
      Gold Mine
    </button>
  </div>
  <div id="ttip">
  <p id='ttiptext'>
  Hover Over Something To Get A Description!
  </p>
  </div>
</div>

CSS

h1 {
  font-size: 2em;
  text-align: center;
}

h2 {
  font-size: 1em;
}

div {
  border-style: solid;
  border-color: black;
}

#resources {
  width: 5em;
}
#ttip{
  position:absolute;
  bottom:0;
  width:99.5%;
}

#buildings {
  position: absolute;
  left: 5.5em;
  top: 5.5em;
}

JavaScript

document.getElementById('goldmine').addEventListener('onmouseover', tooltip('goldmine'));
document.getElementById('goldmine').addEventListener('onmouseout', tooltip('def'));

function tooltip(thing) {
if(thing == 'goldmine') {
document.getElementById('ttiptext').innerHTML = "Get gold without having to click anymore. Automation!"
}
if(thing == 'def') {
document.getElementById('ttiptext').innerHTML = "Hover Over Something To Get A Description!"
}


}