Pseudo-element placed beyond the parent's boundary prematurely causes premature wrapping of the line

I've implemented a basic tooltip feature on my website using the tooltip attribute and an ::after pseudoelement. The issue I'm facing is that the pseudoelement wraps to the size of its parent element because it's positioned outside. Is there a way to prevent this behavior without disabling wrapping completely?

Here is the link to the Fiddle for reference: https://jsfiddle.net/v5zhf2nu/1/

CSS:

[tooltip]
{
    position: relative;
    cursor: help;
}

[tooltip]::after
{
    pointer-events: none;
    position: absolute;
    content: attr(tooltip);
    left: 100%;
    top: 50%;

    margin-left: 3px;
    background-color: #111111;
    color: white;
    width: auto;
    padding: 3px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    padding-left: 6px;
    padding-right: 6px;
    display: none;
    z-index: 3;
    max-width: 1000px;
}

[tooltip]:hover::after
{
    display: inline-block;
}

HTML:

<span tooltip = "This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>
htmlcsspseudo-element

Answer №1

Avoid setting the position of the element to relatively positioned. This will ensure that the pseudo-element's containing block is the viewport or a sufficiently wide element.

[data-tooltip] { position: static; } /* default value */

Do not specify the left property for the pseudo-element. The use of auto will result in the default static position, which aligns it at the end of the element as it is an ::after pseudo-element.

[data-tooltip]::after { left: auto; } /* default value */

Instead of using top, consider adding some margin, for example:

[data-tooltip]::after {
  top: auto; /* default value */
  margin-top: .75em;
}

The width of the pseudo-element will not be constrained by the width of the element but rather by the viewport or the closest positioned ancestor. To limit this width further (but not increase it), you can utilize max-width:

[data-tooltip]::after { max-width: 1000px; }


[data-tooltip] {
  cursor: help;
}
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  content: attr(data-tooltip);
  margin-top: .75em;
  margin-left: 3px;
  background-color: #111111;
  color: white;
  width: auto;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  width: auto;
  z-index: 3;
  max-width: 1000px;
}
<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>
<br /><br /><br />
<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. ">Mouse over me!</span>

Answer №2

To ensure the correct positioning, set the value of right to be small enough, taking into account the maximum width and considering paddings, borders, and margins:

right: -1015px;

If you prefer not to calculate, you can use a very small value like -100000000000px, but in this case, you will need to include the max-width property. If you opt for the exact value, you can omit max-width if desired.

max-width: -1000px;

Ultimately, choose one of the following options:

width: fit-content;
width: max-content;

Note that these may require vendor prefixes as they are not universally supported yet.

Answer №3

Revise:

[tooltip]::after
{
    position: relative;
    left: 0;
}

Instead of:

[tooltip]::after
{
    position: absolute;
    left: 100%;
}

I believe you can remove the max-width property.

https://jsfiddle.net/v8drk6tm/5/

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

PHP: Retrieving a selection value without the use of a submit button

I am trying to access and utilize the select value in my current PHP file, but without the use of a submit button. How can I accomplish this? Here is the code snippet I am working with: <?php $args = array( 'orderby' =&g ...

phphtmlselect

Struggling to center the hidden divs both vertically and horizontally on the page when they are made visible

I'm having trouble aligning my hidden divs in the center of the page. When I set their position to relative, the scroll increases as I move from one page to another (meaning the div is not vertically centered on the page). Should I place all three d ...

javascriptcsshtmlalignment

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this? ...

javascripthtmlcss

Standard User Interface Designs

I need to showcase a web app prototype to a client in the upcoming days. However, I struggle with CSS and never seem satisfied with the outcomes I achieve. While coding the business logic is easy for me, designing the UI consumes most of my time. I prefer ...

cssuser-interface

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...

htmlcssrshiny

When you click on the image link, watch as the page gracefully transitions to a new one determined by the URL

I need assistance with a functionality where an image inside a div has a link to the next page. When this image is clicked, it should smoothly transition to the new page specified by its link. Any help with implementing this would be greatly appreciated. ...

javascriptjqueryhtmlcss

Retrieving Form Validation Error Value in AngularJS

Incorporating AngularJS 1.2 RC2 and utilizing Bootstrap for CSS, I have constructed a straightforward form as shown below: <form class="form-horizontal" name="form" novalidate> <label class="col-lg-2 control-label" for="name">Name</labe ...

javascripthtmlformsangularjs

Instantly display modal upon website loading

Adding more context to the title, I have a modal that was included in a purchased template and it was originally set to only open when a button is clicked. However, I want the modal to automatically pop up when the page loads. The issue is that the modal ...

javascripthtmlmodal-dialog

What is causing my navigation bar to display menu items vertically?

I'm diving into the world of Bootstrap and I've created a menu, but it seems like the menu items are stacking vertically on the right side rather than aligning horizontally on the left. Can someone spot where I might have made an error? Here is ...

htmlcsstwitter-bootstrapbootstrap-4nav

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

javascriptjqueryhtmlcss

problem arises when I attempt to use the code individually, as well as when I incorporate it into my existing

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>App Title</title> <!-- Framework's CSS Fil ...

jqueryhtml

execute jquery slidedown animation when the page is loaded

Is there a way to use jQuery to slide down a div on page load when its CSS is set to display:none? I've come across various solutions, but none seem to work if the div is initially hidden. The challenge is finding a method that hides the div on load a ...

jquerycssslideslidedown

Modifying app aesthetics on-the-fly in Angular

I am currently working on implementing various color schemes to customize our app, and I want Angular to dynamically apply one based on user preferences. In our scenario, the UI will be accessed by multiple clients, each with their own preferred color sch ...

javascriptcssangulartypescriptsass

Choose an image and save the selection information for the following page (Tarot card)

I'm in the process of creating a website that showcases multiple tarot cards. The goal is for users to select the cards they're interested in and have their chosen card displayed on the next page. I've implemented some code for selecting the ...

javascripthtmlcssimage

What is the best way to design a table to allow for changing the colors of specific boxes in the table when clicked?

I am looking to create a feature where the elements in this table change color from the background color to red and back to the default color when they are clicked. Can anyone help me achieve this? <table align="center" style="height: 355px;" width=" ...

javascripthtmlcss

Encountered AJAX Issue while trying to access XML document

My goal is to extract information from an XML file using AJAX <?xml version="1.0" encoding=UTF-8"?> <user> <u_idno>1</u_idno> <u_name>nobody</u_name> <u_srnm>nothing</u_srnm> <u_r ...

javascripthtmlajaxxml

Is there a way for me to automatically update a webpage every 5 minutes, beginning at 8:01 a.m., and subsequently at 8:06 a.m., and so forth?

<html> <head>Harshal</head> <script> var limit="5:0" var doctitle = document.title var parselimit=limit.split(":") parselimit=parselimit[0]*60+parselimit[1]*1 function beginrefresh(){ if (parselimit==1) window.location.reload ...

javascripthtml

What is causing my two divs to fail in expanding to the full height of the parent div?

HTML: <div id="main" class="rounded-corners"> <div id="benefits"> <img src="/benefits-heading.png" style="padding: 30px;" /> <div id="corporateside"> ...

css

Setting the lang attribute on the html element in Nuxt: A step-by-step guide

Customizing the nuxt.config.js file allows for personalization of the head contents by adding meta tags and other elements: module.exports = { /* ** Headers of the page */ head: { title: 'amazing title', meta: [ { charset: ...

javascripthtmlvue.jsnuxt.jsvue-meta

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit