Geek Answers Handbook

CSS3 "Tooltip" with: hover: after positioning and size

I know that you can create a custom “tooltip” using selectors :hover:afterand align this tooltip with the source item by marking the source item as position:relativewith the tooltip as absolute.

test
<span custom-tooltip="testing a custom tooltip" class="tooltip">test</span>
test

CSS

.tooltip {
position: relative;
}
.tooltip:hover:after {
content: attr(custom-tooltip);
position: absolute;
background: #000000;
color: white;
}

However, I have to use absolute values ​​to place or size this item :after

top: 30px;
left: -30px;
width: 300px;

What if I want to make the element as wide as it should be (Percentage refers to the parent element creating a large vertical block, so I cannot tell it to go width: 100%)

And centered under the parent ( left: -50%leads to the fact that he moves 50% of the parent to the left, and not in the center)

javascript? ( , - , calc() ?

+5
2

, white-space:nowrap. , , , . ( ):

<p>Lorem <span tooltip="Lorem ipsum">ipsum</span> dolor sit amet.</p>

CSS:

*[tooltip] {
  position: relative;
  border-bottom: dotted 1px #000;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: nowrap;
}

, :before :after. , CSS :

*[tooltip] {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 200px;
  margin: 0 -75px;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: nowrap;
  width: 200px;
}

, , /, . display:inline-block text-align:center.

, " ".

+7
.tooltip
 {
  display: inline;
  position: relative;
 }
.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 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
 }

TalkersCode CSS3

0

More articles:


All Articles