5-jQuery tool tips

5-jQuery tool tips.markdown

5-jQuery tool tips

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

<nav>
  <ul>
    <li><a href="#" class="link" id="eat">EAT.</a>
      <div class="tip" id="eatText">
        <p>CHOCOLATE
          <br>DARK CHOCOLATE
          <br>ANY CHOCOLATE</p>
      </div>
    </li>
    <li><a href="" class="link" id="sleep">SLEEP.</a>
      <div class="tip" id="sleepText">
        <p>EIGHT HOURS
          <br> A NIGHT
          <br>OR FIVE</p>
      </div>
    </li>
    <li><a href="" class="link" id="design">DESIGN.</a>
      <div class="tip" id="designText">
        <p>ITERATE REITERATE REGURGITATE</p>
      </div>
    </li>
  </ul>
</nav>

script.js

$(document).ready(function() {
  console.log('ready'),

    //hide all tool tips

    //tooltip for eat (hover takes two functions)
    $('#eat').hover(function() { // first function

      //turn on the tool tip
      $('#eatText').show();

    }, function() { // second function
      $('#eatText').hide();

    });

  //add code for the tooltip for sleep (hover takes two functions)
    $('#sleep').hover(function() { // first function

      //turn on the tool tip
      $('#sleepText').show();

    }, function() { // second function
      $('#sleepText').hide();
    });
  //add code for the tooltip for design (hover takes two functions)

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@charset "UTF-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Verdana;
  background-color: #1c5284;
}

a {
  font-size: 72px;
  color: #0e7bae;
  text-decoration: none;
}

a:hover {
  color: white;
}

ul {
  width: 8in;
  margin: 0px auto;
  text-align: center;
  margin-top: 72px;
}

li {
  display: inline-block;
}

li:hover {
  color: white;
}

.link {
  position: relative;
}

.tip {
  position: absolute;
  margin-top: -10px;
  margin-left: 15px;
  background-image: url("http://www.redrocketmedia.com/des157/images/speechWhite.png");
  background-repeat: no-repeat;
  width: 160px;
  height: 112px;
  overflow: hidden;
}

.tip p {
  color: gray;
  margin: 35px 18px;
  font-size: 12px;
  font-weight: bold;
}