Jump to content

tooltip stays on page

Recommended Posts


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;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 350px; width: 450px;
			background-color: rgba(0, 75, 133, 0.5);

/* 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>
<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>

<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>

and I have javascript to handle images changing

		<script type="text/javascript">
(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);


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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.