When you hover over it, the text moves above the background content

I am looking to enhance my table by having the text expand and hover over the content with a white background. I have achieved the expand effect, but I am struggling to get the overflow to work properly. You can view the code in action on JsFiddle: JsFiddle

.logon-info-head {
    width: 100%;
    padding: 10px 0;
}
.logon-info-head > div, .logon-info > div{
    display: inline-block;
    width: 10%;
    text-align: center;
}

.type{ width: 19%; }
.date-time {width: 20%; }
.country { width: 5%; }
.op-system { width: 18%; }
.browser { width: 12%; }
.ip-address { width: 9%; }

.logon .logon-info{
    width: 100%;
    padding: 5px 0;
}
.op-system, .browser{
    text-overflow: ellipsis;
    white-space: pre;
    overflow: hidden;
    vertical-align: bottom;
}
.op-system:hover, .browser:hover {
    position: inherit;
    background: white;
    overflow: visible;
    text-align:center;
    padding: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}
<div class="logon">
    <div class="logon-info-head">
        <div class="type">Connection type</div>
        <div class="date-time">Connection date and time</div>
        <div class="ip-address">IP address</div>
        <div class="country">Country</div>
        <div class="op-system">Operating system</div>
        <div class="browser">Browser</div>
        <div class="status">Status</div>
    </div>
    <div class="logon-info">
        <div class="type">Web application user</div>
        <div class="date-time">04.11.2016 13:21:25</div>
        <div class="ip-address">10.195.2.98</div>
        <div class="country">US</div>
        <div class="op-system">Linux Ubuntu</div>
        <div class="browser">Google Chrome</div>
        <div class="status">Failed</div>
    </div>
    <div class="logon-info">
        <div class="type">Web application user</div>
        <div class="date-time">04.11.2016 13:21:25</div>
        <div class="ip-address">10.195.2.98</div>
        <
;div class="country">LV</div>
        <div class="op-system">Windows XP Professional x64 Edition</div>
        <div class="browser">Mozilla Firefox</div>
        <div class="status">Success</div>
    </div>
</div>

htmlcsshover

Answer №1

To display the background, you can utilize transform:

.logon {} .logon .logon-info-head {
  width: 100%;
  padding: 10px 0;
}
.logon .logon-info-head>div,
.logon .logon-info>div {
  display: inline-block;
  width: 10%;
  text-align: center;
}
.logon .logon-info>div {} .logon .logon-info-head .type,
.logon .logon-info .type {
  width: 19%
}
.logon .logon-info-head .date-time,
.logon .logon-info .date-time {
  width: 20%
}
.logon .logon-info-head .country,
.logon .logon-info .country {
  width: 5%
}
.logon .logon-info-head .op-system,
.logon .logon-info .op-system {
  width: 18%
}
.logon .logon-info-head .browser,
.logon .logon-info .browser {
  width: 12%
}
.logon .logon-info-head .ip-address,
.logon .logon-info .ip-address {
  width: 9%
}
.logon .logon-info {
  width: 100%;
  padding: 5px 0;
}
.logon .logon-info .op-system,
.logon .logon-info .browser {
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
  vertical-align: bottom;
}
.logon .logon-info .op-system:hover,
.logon .logon-info .browser:hover {
  background: white;
  font-size: 0.5rem;
  transform: scale(2) translatey(-1em);
  transform-origin: center 0;
  padding: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
}
<div class="logon">

  <div class="logon-info-head">
    <div class="type">Connection type</div>
    <div class="date-time">Connection date and time</div>
    <div class="ip-address">IP address</div>
    <div class="country">Country</div>
    <div class="op-system">Operating system</div>
    <div class="browser">Browser</div>
    <div class="status">Status</div>
  </div>

  <div class="logon-info">
    <div class="type">Web application user</div>
    <div class="date-time">04.11.2016 13:21:25</div>
    <div class="ip-address">10.195.2.98</div>
    <div class="country">US</div>
    <div class="op-system">Linux Ubuntu</div>
    <div class="browser">Google Chrome</div>
    <div class="status">Failed</div>
  </div>

  <div class="logon-info">
    <div class="type">Web application user</div>
    <div class="date-time">04.11.2016 13:21:25</div>
    <div class="ip-address">10.195.2.98</div>
    <div class="country">LV</div>
    <div class="op-system">Windows XP Professional x64 Edition</div>
    <div class="browser">Mozilla Firefox</div>
    <div class="status">Success</div>
  </div>

</div>

https://jsfiddle.net/8g0kvjx2/3/

Answer №2

To display the entire text on hover, you can apply white-space: pre-wrap;. This will prevent content overflow and ensure all text is visible.

Check out the updated Fiddle

Modification

If you prefer to maintain row height while displaying full text, use width: auto; on hover like this:

.logon .logon-info .op-system:hover,
.logon .logon-info .browser:hover {
  min-width: 18%;
  width: auto;
}

I hope this information proves useful!

Answer №3

To create tooltips for the cell divs, you can utilize the :before pseudo element along with a custom attribute tooltip="cell content". Adding opacity on :hover will make the full text tooltips visible with some custom CSS styling.

Below is the modified code to achieve this functionality:

.logon{}

.logon .logon-info-head{
    width: 100%;
    padding: 10px 0;
}

.logon .logon-info-head>div, .logon .logon-info>div{
    display: inline-block;
    width: 10%;
    text-align: center;
}

.logon .logon-info>div{
}

.logon .logon-info-head .type, .logon .logon-info .type{width: 19%}
.logon .logon-info-head .date-time, .logon .logon-info .date-time{width: 20%}
.logon .logon-info-head .country, .logon .logon-info .country{width: 5%}
.logon .logon-info-head .op-system, .logon .logon-info .op-system{width: 18%}
.logon .logon-info-head .browser, .logon .logon-info .browser{width: 12%}
.logon .logon-info-head .ip-address, .logon .logon-info .ip-address{width: 9%}

.logon .logon-info{width: 100%;padding: 5px 0;}

.logon .logon-info .op-system,
.logon .logon-info .browser{
    text-overflow: ellipsis;
    white-space: pre;
    overflow: hidden;
    vertical-align: bottom;
}

.logon .logon-info .op-system[tooltip]:before,
.logon .logon-info .browser[tooltip]:before{
     position : absolute;
     content : attr(tooltip);
     opacity : 0;
     background: white;
     box-shadow: 0px 0px 15px #888888;
     padding:5px;
     }

.logon .logon-info .op-system[tooltip]:hover:before,
.logon .logon-info .browser[tooltip]:hover:before{
    opacity : 1;
}
<div class="logon">

<div class="logon-info-head">
<div class="type">Connection type</div>
<div class="date-time">Connection date and time</div>
<div class="ip-address">IP address</div>
<div class="country">Country</div>
<div class="op-system">Operating system</div>
<div class="browser">Browser</div>
<div class="status">Status</div>
</div>

<div class="logon-info">
<div class="type">Web application user</div>
<div class="date-time">04.11.2016 13:21:25</div>
<div class="ip-address">10.195.2.98</div>
<div class="country">US</div>
<div class="op-system" tooltip="Linux Ubuntu">Linux Ubuntu</div>
<div class="browser" tooltip="Google Chrome">Google Chrome</div>
<div class="status">Failed</div>
</div>

<div class="logon-info">
<div class="type">Web application user</div>
<div class="date-time">04.11.2016 13:21:25</div>
<div class="ip-address">10.195.2.98</div>
<div class="country">LV</div>
<div class="op-system" tooltip="Windows XP Professional x64 Edition">Windows XP Professional x64 Edition</div>
<div class="browser" tooltip="Mozilla Firefox">Mozilla Firefox</div>
<div class="status">Success</div>
</div>

</div>

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

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

javascripthtml

Different Types of Buttons in HTML

As someone who is new to the world of HTML coding and JavaScript, I have a question about button types. According to the W3Schools website, there are three types of buttons: <button type="button|submit|reset"> First question: Why do we need a for ...

javascripthtmlformsbutton

react dealing with clicking and blurring at the same time

Is there a way to ensure an input's onBlur event fires only after a button's onClick event is completed? The challenge is that the function relying on the state change caused by the onClick needs to be executed by the onBlur event. Using setTimeo ...

javascripthtmlreactjs

Issues with HTML keycodes not functioning properly in Firefox

Here is the code I am using: function restrictInput(e) { var charCode = (e.which) ? e.which : ((e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : 0)); if((charCode < 48 || charCode > 57) && ( ...

javascripthtml

Eliminate the empty gap preceding the slideshow

I have a slideshow and aside content in HTML. My goal is to eliminate the space below the slideshow so that the aside content can be positioned right next to the end of the slideshow. Unfortunately, I am unsure how to remove this space without disrupting ...

jqueryhtmlcsswebslideshow

Enclose an <img> tag within a <span> element and use jQuery to assign a class to the <span>

I am trying to wrap a specific <img> tag with a <span> element and assign a class to the <span>. Below is the relevant code snippet: <img id="wrapped-image" alt="" src=""> Despite my efforts, the following code does not seem to w ...

jqueryhtmlcss

Ways to eliminate additional container padding within flexbox

I'm struggling with understanding flexbox and couldn't find any clear explanation on the W3 page about how to remove the extra spacing between containers. For example, in one of their demos, I'm unsure how to achieve a layout similar to lef ...

htmlcssflexbox

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

Animating numerous elements simultaneously during Vue component rendering

Take a look at this simple case in the following jsfiddle: https://jsfiddle.net/hsak2rdu/ I attempted to swap and animate two elements, but it didn't work as expected. When you click the toggle button in the playground, the second element quickly mo ...

javascripthtmlcssvue.jsvue-transitions

Discover the Magic of CSS Animation

I am not experienced in CSS animations and have limited knowledge about animations. I am trying to create an animation where a grey box slides down from the top line above the login/register section, but currently it only fades in. If anyone can provide an ...

javascripthtmlcssanimationcss-animations

Is it possible to utilize Javascript instead of PHP Curl to present JSON API data?

After successfully displaying JSON API data from openweathermap.org on my HTML webpage using PHP Curl, I am now seeking help to achieve the same output using Javascript. My PHP script retrieves JSON data from the source, and here is a snippet of that PHP c ...

javascriptphphtmljsoncurl

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header. I have provided an example s ...

javascripthtmlcssscroll

Disable browser suggestions in Material UI's Autocomplete component

Encountering an issue with Material-ui Autocomplete: import Autocomplete from "@material-ui/lab/Autocomplete"; Currently using it in: <Autocomplete id="checkboxes-tags-demo" autoComplete={false} options={sta ...

javascripthtmlreactjsautocompletematerial-ui

When the div is loaded, automatically navigate to the crucial li element within it, such as the one with the class "import

Welcome to my first webpage: <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div id="comment"></div> <script type="text/ja ...

javascriptjqueryhtmlscrollload

Unable to alphabetically arrange buttons automatically

I am encountering a challenge with automatically sorting buttons alphabetically on my webpage. I am unable to determine the method for sorting these buttons using jquery or javascript, but my goal is to have them sorted automatically when the page loads. I ...

javascriptjqueryhtmlbutton

Learn how to create text animations using CSS triggered by a scroll event listener

I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...

javascriptcssreactjsnext.js

Creating a unified border style for both <p> and <ul> tags in HTML5

Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...

csshtml

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

There are times when I notice that a website's URL is structured like this: www.website.com/index.php while other times it appears like this: www.website.com/index/ What is the reason for the absence of a .php or .html extension in the second URL? ...

phphtmlurl

Different ways to manipulate the CSS display property with JavaScript

Having trouble changing the CSS display property to "none" using JavaScript. Check out my code: <div class="mydiv" onClick="clickDiv1()">hello</div> <div class="mydiv" onClick="clickDiv2()">hi</div> <div class="mydiv" onClick=" ...

javascripthtmlcss