title: Make element hover when unhovering, add close button so it remembers cookies?
body: <p>I am trying to make a tooltip, but I need it to stay hovering when user unhovers.</p>
  
  <p>Also, I am trying to add a close button to that tooltip, that will stay with the "hover state" and when user clicks on it, I want to make it to remember cookies so it will not open again for that cookie.</p>
  
  <p>I am a novice at javascript and jQuery and have been breaking my mind on this for several days now.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  /* Tooltip CSS Created By Deni*/
  
  .tooltip-container {
   width: 400px;
   height: 300px;
   background: #DBDBDB;
   border: 1px solid black;
   margin: 10% auto;
  }
  
  /* Start the tooltip css */
  
  .tooltip {
   position: relative;
   z-index: 9998;
   cursor: help;
  }
  .tooltip &gt; span {
   display: none;
  }
  .tooltip:hover {
   z-index:  9999;
  }
  .tooltip:hover .tooltip-data {
   display: block;
   width: 150px;
   padding: 5px;
   color: #dadada;
   background-color: #A35FA1;
   font-size: 11px;
   border-radius: 5px;
   text-decoration: none;
   font-family: century gothic;
   position: absolute;
   bottom: 20px;
   left: -10px;
   text-align: center;
  }
  .tooltip-container &gt; a {
   margin-right: 10px;
  }
  .permhover {
   display: block;
   opacity: 1;
  }
  **HTML:**</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Tooltip&lt;/title&gt;
  &lt;link href="tooltip.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="jquery-1.11.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;div class="tooltip-container"&gt;
       &lt;a href="javascript:;" class="tooltip"&gt;This is the information&lt;span class="tooltip-data"&gt; This is one Tooltip!&lt;/span&gt;&lt;/a&gt;   
       &lt;a href="javascript:;" class="tooltip"&gt;This is the information &lt;span class="tooltip-data"&gt; This another one Tooltip!&lt;/span&gt;&lt;/a&gt;   
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that is not much but all the help is appreciated. Thank you very much.</p>