tooltip stays on page

[lional]

Hi

I am trying to keep a tooltip on the page even when the user scrolls

 

What I had in mind is keeping the the tooltip in a static position on the screen so as the user scrolls the position would stay teh same but for this to happen the margins would need to dynamically change.

 

Here is my CSS so far

 /* Tooltip container */
.tooltip {
    
   /* border-bottom: 0px dotted black;  If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family:Arial, Helvetica, sans-serif;
			font-size:16px;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 350px; width: 450px;
			margin-top:25px;
			visibility:hidden;
			background-color: rgba(0, 75, 133, 0.5);
			opacity:0.6;
			padding-left:15px;padding-bottom:15px;padding-right:15px
			}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    ;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.8;
}

My html line is repeated for each category which I have 17 categories

<a data-image-id="1" class="navigation  <ul>
    
       <li>
<a data-image-id="1" class="navigation tooltip" href="#"><h2 style="text-align:center;margin-top:5px">Category1</h2><span class="tooltiptext">Tooltip Text</span></a>
           
        </li>

<li>
<a data-image-id="2" class="navigation tooltip" href="#"><h2 style="text-align:center;margin-top:5px">Category2</h2><span class="tooltiptext">Tooltip Text</span></a>
           
        </li>
-->        
        </li>

and I have javascript to handle images changing

		<script type="text/javascript">
//<![CDATA[
window.onload=function(){
(function() {
    var images = {
   "1": "images/hygiene1.png", 
   "2": "images/hygiene1.png",
   "3": "images/change_room.png",
   "4": "images/foam.png",
   "5": "images/drains.png",
   "6": "images/factory.png",
   "7": "images/cleaning.png",
   "8": "images/consumable.png",
   "9": "images/lifting.png",
   "10": "images/deboning.png",
   "11": "images/smoking.png",
   "12": "images/deboning.png",
   "13": "images/water.png",
   "14": "images/a_z.png",
   "15": "images/csk.png",
   "16": "images/boyens.png",
   "17": "images/galactic.png"

};
    var navTv = document.getElementById('nav-tv');
    var arr = document.getElementsByClassName('navigation');
    for(var i=0; i<arr.length; i++) {
    	arr[i].onmouseover = function(e) {
            var a = e.target;
            var imgId = a.getAttribute('data-image-id');
            var imgSrc = images[imgId];
            var style = ['background-image: url(', imgSrc, ');'].join('');
            navTv.setAttribute('style', style);
        }
    }
})();
}//]]> 

</script>

Any help pointing me in the right direction so that I can code it will be appreciated

[cyberRobot]

You could use JavaScript. Basically, you would add an event listener to your <h2> tag to detect the hover state. When the event fires, you could add a CSS class to your tool-tip text's <span> tag that shows the tool tip. Of course, you would need to add some other event listener so the user can hide the tool tip. Perhaps the tool tip could include a close link. That event listener would remove the class the other listener added.