Enable the children elements' before and after content to surpass the limitations set by the parent's overflow property

Question

Enable the children elements' before and after content to surpass the limitations set by the parent's overflow property

I have a division with the overflow property set to scroll to view all fields without using too much page space. Each field includes a title span and an associated input. Users can hover over the spans to see helpful tooltips. I use the spans' after and before pseudo-elements to create customized tooltips on hover. However, the display of tooltips is limited by the parent div's overflow property.

Below is the rendered HTML example:

<div id="ContentPlaceHolder1_leftDiv" class="l-custom-left">     
    <div class="personalizedFields">
        <table>
            <tr>
                <td>
                    <span title="Field Associated: First Name" class="tooltip">First Name</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField36$field36" type="text" id="field36" />

                </td>
            </tr>

            <tr>
                <td>
                    <span title="Field Associated: Last Name" class="tooltip">Last Name</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField37$field37" type="text" id="field37" />

                </td>
            </tr>
        </table>
    </div>
</div>

Css for the parent div and spans:

.l-custom-left
{
    overflow-x: hidden;
    width: 250px;
    height: 50vh;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

How can I make the spans' after and before content "override" the parent div's overflow restriction?

JSfiddle

javascript jquery html css

Answer 1

Answer №1

If you are looking to make this function, there are two methods you can try. The first option is to utilize JavaScript (which I won't delve into) to position an element outside the container at the exact location of the element. This solution may seem cumbersome, but I have had to resort to it numerous times before CSS3 came into play.

The second method is more refined, although it does violate HTML semantics. The issue with your :before and :after pseudo-elements not extending beyond a scrollable container is due to them being perceived as children of the .tooltip element, thereby becoming part of the document flow within the scrolling container even if they are absolutely positioned.

So how do we tackle this problem? We take a shortcut, plain and simple.

Add another element following your span like so:

<span class="tooltip">First Name</span>
<span title="Associated Field: First Name" class="tooltip-hovershim">First Name</span>

We duplicate the content to maintain consistency in size.

Then, adjust your CSS as follows:

.tooltip, .tooltip-hovershim
{
    display: inline;
}

.tooltip:hover:after, .tooltip-hovershim:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
}
.tooltip-hovershim { 
    position: absolute;
    transform: translateX(-100%);
    color: transparent;
}

.tooltip:hover:before, .tooltip-hovershim:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

And there you have it! You now have your floating element. It's that simple.

JSFiddle Example

^{Applied only to the initial two elements for brevity.}

For added fun, here is the JavaScript alternative

JSFiddle with the JS variant

And here is the essential segment of the JavaScript code:

var span_labels = document.querySelectorAll('.personalizedFields td span'),
    label_house = document.createElement('div');

document.body.appendChild(label_house);
label_house.setAttribute('class', 'tooltip-hoverer');

for (var i=0,l=span_labels.length;i<l;i++){
  var curr_label = span_labels[i];
    curr_label.addEventListener('mouseover', function(e) {
       e.preventDefault();
       label_house.innerHTML = e.target.getAttribute('title');
       var xy = getOffset(e.target);
       label_house.style.top = (xy.top - 26) + 'px';
       label_house.style.left = (xy.left) + 'px';
       label_house.style.display = 'block';
    });
    curr_label.addEventListener('mouseout', function() {
       label_house.style.display = 'none'; 
    });
}
                                
function getOffset(el) {
    var elementRectangle = el.getBoundingClientRect();
    var _x = elementRectangle.left;
    var _y = elementRectangle.top + el.offsetParent.scrollTop;
    return { top: _y, left: _x };
}

Answer 2

If you are looking to make this function, there are two methods you can try. The first option is to utilize JavaScript (which I won't delve into) to position an element outside the container at the exact location of the element. This solution may seem cumbersome, but I have had to resort to it numerous times before CSS3 came into play.

The second method is more refined, although it does violate HTML semantics. The issue with your :before and :after pseudo-elements not extending beyond a scrollable container is due to them being perceived as children of the .tooltip element, thereby becoming part of the document flow within the scrolling container even if they are absolutely positioned.

So how do we tackle this problem? We take a shortcut, plain and simple.

Add another element following your span like so:

<span class="tooltip">First Name</span>
<span title="Associated Field: First Name" class="tooltip-hovershim">First Name</span>

We duplicate the content to maintain consistency in size.

Then, adjust your CSS as follows:

.tooltip, .tooltip-hovershim
{
    display: inline;
}

.tooltip:hover:after, .tooltip-hovershim:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
}
.tooltip-hovershim { 
    position: absolute;
    transform: translateX(-100%);
    color: transparent;
}

.tooltip:hover:before, .tooltip-hovershim:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

And there you have it! You now have your floating element. It's that simple.

JSFiddle Example

^{Applied only to the initial two elements for brevity.}

For added fun, here is the JavaScript alternative

JSFiddle with the JS variant

And here is the essential segment of the JavaScript code:

var span_labels = document.querySelectorAll('.personalizedFields td span'),
    label_house = document.createElement('div');

document.body.appendChild(label_house);
label_house.setAttribute('class', 'tooltip-hoverer');

for (var i=0,l=span_labels.length;i<l;i++){
  var curr_label = span_labels[i];
    curr_label.addEventListener('mouseover', function(e) {
       e.preventDefault();
       label_house.innerHTML = e.target.getAttribute('title');
       var xy = getOffset(e.target);
       label_house.style.top = (xy.top - 26) + 'px';
       label_house.style.left = (xy.left) + 'px';
       label_house.style.display = 'block';
    });
    curr_label.addEventListener('mouseout', function() {
       label_house.style.display = 'none'; 
    });
}
                                
function getOffset(el) {
    var elementRectangle = el.getBoundingClientRect();
    var _x = elementRectangle.left;
    var _y = elementRectangle.top + el.offsetParent.scrollTop;
    return { top: _y, left: _x };
}

Answer 3

Answer №2

Due to the limitations of CSS alone, I made the decision to combine JavaScript and JQuery to achieve the desired functionality. Taking inspiration from Josh Burgess's JS implementation, I present a JQuery-focused solution:

var tooltip;

$(document).ready(function() {
    $('span.tooltip').on({
        mouseenter: function (e) {
            tooltip = document.createElement('div');
            document.body.appendChild(tooltip);
            $(tooltip).addClass('tooltip-hoverer');
            $(tooltip).text($(this).attr('data-tooltip'));
            var x = e.clientX - (($(tooltip).outerWidth()) / 2); // Adjusting for tooltip arrow position
            var y = this.getBoundingClientRect().top + this.offsetParent.scrollTop;
            $(tooltip).css({
                top: y - 32,
                left: x,
                display: 'block'
            });
        },
        mouseleave: function () {
            document.body.removeChild(tooltip);
        }
    });                       
});

Note that my approach differs from Josh's in that tooltips are generated per span hover, eliminating the need to preload all tooltips. They are removed upon cursor exit.

View the JSFiddle demo here

Answer 4

Due to the limitations of CSS alone, I made the decision to combine JavaScript and JQuery to achieve the desired functionality. Taking inspiration from Josh Burgess's JS implementation, I present a JQuery-focused solution:

var tooltip;

$(document).ready(function() {
    $('span.tooltip').on({
        mouseenter: function (e) {
            tooltip = document.createElement('div');
            document.body.appendChild(tooltip);
            $(tooltip).addClass('tooltip-hoverer');
            $(tooltip).text($(this).attr('data-tooltip'));
            var x = e.clientX - (($(tooltip).outerWidth()) / 2); // Adjusting for tooltip arrow position
            var y = this.getBoundingClientRect().top + this.offsetParent.scrollTop;
            $(tooltip).css({
                top: y - 32,
                left: x,
                display: 'block'
            });
        },
        mouseleave: function () {
            document.body.removeChild(tooltip);
        }
    });                       
});

Note that my approach differs from Josh's in that tooltips are generated per span hover, eliminating the need to preload all tooltips. They are removed upon cursor exit.

View the JSFiddle demo here

Enable the children elements' before and after content to surpass the limitations set by the parent's overflow property

Answer №1

JSFiddle Example

JSFiddle with the JS variant

Answer №2

View the JSFiddle demo here

Similar questions

Navigate between tabs with a single click

Issues encountered while modifying Vue data

Exploring elements in Javascript

I am unable to utilize the backspace function within a text box generated by JavaScript

Managing the output from a function: Tips and strategies

Different floating divisions that are tightly packed adjacent to each other

Error: Validation issues detected in field functionality

What is the most streamlined method for identifying if a browser is operating on an Android device?

Some devices experiencing website update issues while others are successful

Include an additional title to the header of the Bootstrap 4 modal

Leveraging the useEffect hook to make multiple API calls in ReactJS

Move the location of the mouse click to a different spot

How to display currency input in Angular 2

How can I select a checkbox using jQuery?

Is it possible to personalize Carousel-indicators within react-bootstrap?

Utilizing the map() method for iterating through a nested property within a React component

"Error in Visual Studio: Identical global identifier found in Typescript code

How can I conceal login and register router-links in the Vue + Laravel SPA project navbar immediately after a user logs in?

NodeJs Importing a File

There seems to be an issue with the Alexa skill's ability to provide a response after another