CODEWITHSUNDEEP
htmlcss
Julian de Bruin
Julian de Bruin

Reputation: 35

label not fully on page

I'm having a small problem with a hover aria label I made with HTML/CSS. As you can see in the picture below, the title is not fully shown on the page. When the sentence is too long, I want the rest of the sentence shown on a new line so you can still read it. Can someone help? enter image description here

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
    content: attr(aria-label);
    font-size: 13px;
    padding: 6px 8px;
    position: absolute;
    font-weight: normal;
    left: 20px;
    top: 100%;
    white-space: nowrap;
    color: #000;
    border: 1px solid #00adf6;
    background: #FFF;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat diam nec ullamcorper dapibus. Sed nunc odio, accumsan id pellentesque in, interdum quis metus."><i class="fa fa-info info-btn"></i></span>

Adding a width or max-width didn't work.

The first problem is now solved. But now I have the following problem: enter image description here

Other text is going over it. I want the aria-label to be on the foreground.

Upvotes: 1

Views: 91

Answers (4)

About7Codes
About7Codes

Reputation: 114

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
    content: attr(aria-label);
    font-size: 13px;
    padding: 6px 8px;
    position: absolute;
    font-weight: normal;
    left: 20px;
    top: 0; /* new **/
    min-width: 200px;  /* new **/
    color: #000;
    border: 1px solid #00adf6;
    background: #FFF;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat diam nec ullamcorper dapibus. Sed nunc odio, accumsan id pellentesque in, interdum quis metus."><i class="fa fa-info info-btn"></i></span>

Upvotes: 1

TechnoTech
TechnoTech

Reputation: 799

You need to remove

white-space: nowrap;

add display:block for showing it properly or you can use div tag instead if span

span:hover {
    position: relative;
    display: block; /*added*/

}

span[aria-label]:hover:after {
    content: attr(aria-label);
    font-size: 13px;
    padding: 6px 8px;
    position: absolute;
    font-weight: normal;
    left: 20px;
    top: 100%;
    color: #000;
    border: 1px solid #00adf6;
    background: #FFF; 
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span  aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat diam nec ullamcorper dapibus. Sed nunc odio, accumsan id pellentesque in, interdum quis metus."><i class="fa fa-info info-btn"></i></span>

Upvotes: 1

About7Codes
About7Codes

Reputation: 114

Under span[aria-label]:hover:after

Remove white-space:nowrap or change it to white-space:normal

Upvotes: 1

Marko
Marko

Reputation: 409

Delete white-space:nowrap

It means that you dont allow sentence to break to another line. Default value is white-space:normal

Upvotes: 1

Related Questions