Html - Make the whole paragraph appear on hover

maximumoverdriverload
June 14, 2023
262 views
0 votes
2 Answers

I want to make the paragraph appear on hover. But when I try putting the code below, the whole paragraph is not appearing, it just shows some of the contents. What I want to happen is for the whole paragraph to appear on hover and all of the words are visible.

I am making a site on Weebly for a school project with relatively small knowledge. Is there anyway to make it work?

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  overflow-wrap: break-word;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<center>
  <br><br>
  <div class="tooltip">Word
    <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus, leo sit amet maximus finibus, quam justo interdum dolor, ac auctor mi elit eu nisi. Praesent vel facilisis mi. Nulla non ligula eget nunc euismod consectetur porta a elit. Pellentesque sodales ipsum nibh, at pretium mi vehicula luctus. Morbi dapibus felis vitae dolor ultrices dapibus. Sed vestibulum a augue id ultricies. Etiam mi diam, hendrerit a quam id, convallis molestie urna. Nullam facilisis elit sit amet lobortis malesuada. Donec lacinia ante turpis, id laoreet risus egestas scelerisque. Aliquam at iaculis nisl. Donec nec venenatis neque. In mollis mauris laoreet pellentesque efficitur. Proin feugiat elit sit amet lacus commodo luctus. Donec rhoncus ipsum vel nibh feugiat, eget feugiat justo volutpat. Aenean et nunc nunc.</span>
  </div>
</center>

Answers

The issue with your code is that the tooltip text is overflowing and not being displayed properly. To make it work, you can add the following CSS rules to your code:

.tooltip {
  white-space: nowrap; /* Prevent text wrapping */
}

.tooltip .tooltiptext {
  white-space: normal; /* Allow text wrapping within the tooltip */
}

By adding white-space: nowrap; to the .tooltip class, you prevent the text from wrapping within the tooltip container. This ensures that the entire paragraph is visible on hover.

By adding white-space: normal; to the .tooltip .tooltiptext class, you allow the text within the tooltip to wrap if it exceeds the width of the container.

Here’s the updated code with the additional CSS rules:

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  white-space: nowrap; /* Prevent text wrapping */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  overflow-wrap: break-word;
  white-space: normal; /* Allow text wrapping within the tooltip */
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<center>
  <br><br>
  <div class="tooltip">Word
    <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus, leo sit amet maximus finibus, quam justo interdum dolor, ac auctor mi elit eu nisi. Praesent vel facilisis mi. Nulla non ligula eget nunc euismod consectetur porta a elit. Pellentesque sodales ipsum nibh, at pretium mi vehicula luctus. Morbi dapibus felis vitae dolor ultrices dapibus. Sed vestibulum a augue id ultricies. Etiam mi diam, hendrerit a quam id, convallis molestie urna. Nullam facilisis elit sit amet lobortis malesuada. Donec lacinia ante turpis, id laoreet risus egestas scelerisque. Aliquam at iaculis nisl. Donec nec venenatis neque. In mollis mauris laoreet pellentesque efficitur. Proin feugiat elit sit amet lacus commodo luctus. Donec rhoncus ipsum vel nibh feugiat, eget feugiat justo volutpat. Aenean et nunc nunc.</span>
  </div>
</center>

With these changes, the tooltip text should appear properly on hover, and the entire paragraph should be visible within the tooltip container.

Your text is being cut off from the top because of bottom:100%; it is fixing the bottom of the text container to the top of tooltip and if there is not enough space on top of tooltip, it will go outside the html page because it is position:absolute. So, make sure there is enough room on top of the tooltip
or position the content in a way that when it is visible it has enough space,check the code below, I have used top:0; I have also removed the <center> tag as it is depreciated and added some styling on the body:

<html>

<head>
  <style>
    body {
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: 0;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
  </style>
</head>

<body>
  <div class="tooltip">Word
    <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Make the whole paragraph appear on hover

Answers