<head>
    <title>Tooltips</title>
   

 <link rel="stylesheet" href="stylesheets/tooltips.css">	
	
</head>

<body>

<br /><br />

<div>You can see definitions of the words by mousing over the blue and yellow highlighted text.<div>
<span class="tooltip">alternator<span class="tooltiptext">An alternator is a generator that converts mechanical energy to electrical energy.</span></span>

<p>A <span class="tooltip">neutron<span class="tooltiptext">A neutron is the neutrally charged particle with about the same mass of a proton that is found in the nucleus of an atom.</span></span> is absorbed by a Uranium-235 nucleus (<span class="tooltip">isotope<span class="tooltiptext">An isotope is an atom that doesn't have the same number of neutrons and protons.</span></span>) and transforms into an excited Uranium-236 nucleus (isotope). The Uranium-236 nucleus then disintegrates into neutrons and fission products. Read more here: <a target="_blank" href="https://en.wikipedia.org/wiki/Nuclear_fission">nuclear fission wiki</a></p>

<p>The fission reaction creates heat which boils water and the steam moves the wheels of a turbine. The wheels of the turbine turns an <span class="tooltip">alternator<span class="tooltiptext">An alternator is a generator that converts mechanical energy to electrical energy.</span></span> and generates electricity.</p>

///////////////////////
<p>A laser makes <span class="tooltip">monochromatic light<span class="tooltiptext">Monochromatic light is light of a single wavelength.</span></span> and nearly all of the waves it produces are <span class="tooltip">in phase<span class="tooltiptext">When the peaks of two waves with the same frequency are in the same location at the same time they are in phase.</span></span>.</p>
<p>A laser is a device that generates light through <b>light ampflication of stimulated emission of radiation</b>. It is a device that consists of a   <span class="tooltip">lasing medium<span class="tooltiptext">The gain medium or lasing medium serves to strengthen the laser beam through stimulated emission.</span></span>, a <span class="tooltip">pump<span class="tooltiptext">The pump brings the atoms or molecules of the gain medium into excited states by transfering energy.</span></span> (a stimulated energy source), and an <span class="tooltip">optical resonator<span class="tooltiptext">An optical resonator is an arrangement of mirrors which allows a beam of light to circulate as a standing wave. </span></span>. The pump energy is usually supplied by a light source or an electric current. The lasing medium or gain medium is put into an excited state by means of pumping. An optical resonator is an arrangement of mirrors which allows a beam of light to circulate as a standing wave. This keeps the photons bouncing back and forth inside the gain medium. When the <span class="tooltip">electrons<span class="tooltiptext">Electrons are the smallest particles in atoms and they are negatively charged. </span></span> in the atoms become excited, they move from a low energy orbit to a higher energy orbit. When they return to their ground state, the electrons emit photons.   </p>
<h1>Stimulated Emission</h1>
<p>Energy is injected into an atom when a   <span class="tooltip">photon<span class="tooltiptext">photons are elementery particles. They have no mass and travel with the speed of light. They have both characteristics of waves and of particles.</span></span> with a specific <span class="tooltip">frequency<span class="tooltiptext">frequency is defined by the equation c &#61; &lambda;f where c in is the speed of light, &lambda; is the wavelength and f is the frequency in cycles per second.</span></span> is absorbed. The atom or molecule is excited by absorbing a photon of a given energy. If the photon has the energy that corresponds to the energy difference between the excited state and the ground state of the atom, the electron falls to the lower energy level and 2 coherent photons are emitted.</p>
</body>

</html>
.tooltip {
  position: relative;
  color: blue;
  background-color: yellow;
  font-weight: bold;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px; /*I need for the tooltip not to get cut off on the left side! */
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
/*
 position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0%;*/
 /* margin-left: -60px;*/
}
 .tooltiptext {
  position: absolute;
  z-index: 1;
  bottom: 100%;
  right: 20%;
 }
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#tooltip {
	color: blue;
	font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.