Display the entire paragraph when hovering over it

Is there a way to make the entire paragraph appear on hover instead of just showing parts of it? I am building a website on Weebly for a school project and my knowledge is limited.

I tried using the following code, but it only displays some of the content. Ideally, I would like all the words in the paragraph to be visible when hovering over it.

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

htmlcsshover

Answer №1

Your text may appear cut off at the top due to the CSS property bottom:100%;. This fixes the bottom of the text container to the top of the tooltip, and if there isn't enough space above the tooltip, the text may extend beyond the HTML page because of its absolute positioning. Ensure that there is ample room above the tooltip, or adjust the content position so it has enough visible space. Below is a revised code snippet where top:0; is used instead. Additionally, the deprecated <center> tag has been removed, and some styling has been applied to 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>

Answer №2

The issue with the code is that the tooltip text overflows and does not display correctly. To fix this, consider applying the following CSS styles:

.tooltip {
  white-space: nowrap; /* Ensure text does not wrap */
}

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

By adding white-space: nowrap; to the .tooltip class, you prevent text from wrapping inside the tooltip box. This ensures the entire paragraph is visible when hovered over.

By including white-space: normal; in the .tooltip .tooltiptext class, you enable text wrapping if it exceeds the container width.

Here is an updated version of the code with these 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 maxim...</span>
  </div>
</center>
After making these adjustments, the tooltip text should display properly on hover, ensuring the entirety of the paragraph is visible within the tooltip container.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can HTML be rendered within classes?

In the admin section of a website, I am working with multiple CRUD tables that require displaying success, information, or error messages when certain actions are performed, like deleting a record. This is a common practice that involves wrapping messages ...

phphtmlclass

Modifications to the selected input do not impact the current state of the model

Declare 3 select inputs with hierarchical data to be chosen: <select data-ng-model="current.manufacturer" data-ng-options="c.name for c in manufactures"></select> <select data-ng-model="current.mark" data-ng-options="c.name for c in current ...

javascripthtmlangularjsselect

The absence of PHP GET variable being set

I am encountering an issue with my registration php class. It is designed to display a form and upon clicking the registration button, it triggers a function in a login javascript file. This JavaScript file utilizes ajax to send data to an index.php file. ...

javascriptphpjqueryajaxhtml

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

javascriptjqueryhtmlcss

Are you able to develop a customized TestNG Listener to cater to your specific requirements?

I have developed a unique concept for a TestNG listener that meets my specific requirements. Essentially, I aim to design a custom listener that generates a report using a predefined HTML format. The crux of my idea revolves around declaring the listener ...

javahtmlseleniumautomationtestng

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

javascripthtmlcsslua

Can you tell me the specific name of the HTML document style that features two columns?

Here are two websites that showcase a unique two-column style layout: http://momentjs.com/docs/ I find these sites visually appealing and I am curious about the specific name of this style. Is there a template or tool available to create documents with a ...

javascripthtmlunderscore.jsmomentjs

Tips for dynamically adjusting the color of link text within jQuery Mobile?

When using jQuery Mobile, links are styled according to the theme stylesheet. If you want to change this styling, you can use !important as follows: .glossaryLink{ color: white !important; background-color: #CC8DCC; } I am looking to dynamically cha ...

jqueryhtmlcssjquery-mobile

Tips for extracting information from JSON data in the provided API example

{"Dina-Kar":{"com":"available"},"DinaKarPool":{"com":"available"},"DinaKarStore":{"com":"available"},"DinaKarOnline":{"com":"available"},"DinaKarParts":{"com":"available"},"DinaKarJack":{"com":"available"},"DinaKarTunes":{"com":"available"},"DinaKarSmart": ...

phphtmljson

Unexpected resizing occurs when SVGs are nested within each other

I am experimenting with using nested inline SVGs to creatively position smaller svg images within an svg container. However, I am finding it challenging to grasp the guidelines for sizing nested SVG elements. svg { display: block; } Here is my query - ...

htmlcsssvg

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

"Enhance your website design with a navbar that seamlessly blends with the background color

Question 1: I have a requirement for my navbar to affix overlay on top of the background color and image of the div (top-banner). Currently, when I scroll down, the background color overlays my navbar affix instead. How can I ensure that my navbar sta ...

jqueryhtmlcsstwitter-bootstrap

Verification of the data entered in the input box

I am looking to develop an Input Box where users can enter the private details of a person. The first character must be either A or E, and the rest can be alphanumeric with no special characters allowed. I need to implement validation on the client side to ...

javascriptjqueryhtml

What is the best way to align a table (datatable) to the left?

How can I align the table to the left without using float:left in the following code? Applying text-align: left to the parent element of the table doesn't seem to work as expected. http://jsfiddle.net/william/B4qJG/1 HTML: <div class="valueList" ...

htmlcssdatatablehtml-table

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

I am currently using static data in a slider with wow slider jquery mobile. However, I would like to retrieve data from a database and display it in the slider. Can someone provide suggestions on how to do this? Thank you. <script type="text/javascri ...

phphtmljquery-mobile

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

css

Transferring HTML5 Video data by breaking it into segments and streaming it through several HTTP/

Looking for ways to speed up the loading time of an html5 video? Is there a method to make a browser process each webm video fragment as individual TCP streams, in order to take advantage of HTTP/2's enhanced parallelization? ...

htmlhtml5-videohttp2

CSS Hue Rotate is causing the image to appear darker

The CSS filter hue-rotate seems to be darkening my image according to my observations. For an example, visit: https://jsfiddle.net/m4xy3zrn/ Comparing images with and without the filter applied, it’s clear that the filtered one appears much darker than ...

csscss-filters

Styling containers with Pandoc

Currently, I am utilizing Pandoc for the purpose of transforming Pandoc Markdown documents into HTML5 documents. Within my md input, I incorporate custom divs by employing a special Pandoc syntax, like so: ::: Resources A nice document Informative website ...

htmlmarkdownpandoc