How Do I make a small styled hover text

HTML & CSS
#1

How Do I make a small styled hover text? like the text in the white box but it is styled I want the color of the text to be white and the background to be black and it appears 0.1 seconds on hover. The text should display Unavalible Or No Previous Page.

HTML:

   <a class="previous aa nv"><strong>&laquo;</strong> Previous</a>
<a href="#" class="next aa">Next <strong>&raquo;</strong></a>

CSS:

.aa {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

.aa:hover {
  background-color: #ddd;
  color: black;
  text-decoration: none;
  font-weight: bold;
}

.previous {
  background-color: grey;
  color: black;
   font-family: 'Fira Code', monospace;
  cursor:not-allowed;
}
  
  

.next {
 position: absolute;
  background-color: #a1ff3d;
  color: black;
   font-family: 'Fira Code', monospace;
  right: 0%;
}
  
  .nv:hover {
    background-color: grey;
  color: black;
   font-family: 'Fira Code', monospace;
  cursor:not-allowed;
  }
#2

Are you talking about “titles”? You can just add a title attribute to your link as shown below…

<a class="previous aa nv" title="Unavailable"><strong>&laquo;</strong> Previous</a>

This will popup the little tooltip window when they hover over it. :slight_smile:

If you want something more stylized, then you could always put in an element in the link, hidden of course, stylized and when you hover, then it shows. Much like how some CSS navigation menus work.

For instance you could do this…

<a class="previous aa nv"><strong>&laquo;</strong> Previous <span class="tooltip">Unavailable</span></a>

.tooltip {
    display: none;
  }
  
  .nv {
    display: relative;
  }
  .nv:hover .tooltip {
    display: block;
    position: absolute;
    top: -10;
    left: 20;
    padding: .5em;
    background-color: red;
    color: white;
  }

Related fiddle: https://jsfiddle.net/coderslexicon/q48yrLoe/6/

#3

but I want it styled

#4

I am guessing you didn’t see the second half of my answer and check out the fiddle. Where it is styled. :wink:

As for the default tooltip, you can’t style it. It is actually drawn by the browser and not something you control. But again, check out my fiddle and you can quickly see how this can be something you can style anyway you want.

1 Like
#5

Ok thanks I read the code but did not see the fiddle because the default will the result of a CodePen or plain links have descriptions so I did not see the link. :rofl:

#6

Please remember that “hover” is not available to anyone using keyboard navigation or a touch screen, and ensure you provide the same information to them. As a general rule, anything you style for :hover should have the same or similar rules for :focus, to accommodate keyboard users.

3 Likes