CSS3 "Подсказка" с: hover: после позиционирования и размера

Question

Я знаю, что можно создать настраиваемую «всплывающую подсказку» с помощью селекторов :hover:after и выровнять эту подсказку относительно исходного элемента, пометив исходный элемент как position:relative и всплывающую подсказку как 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;
}

Тем не менее, я должен использовать абсолютные значения для позиционирования или размера этого :after элемента

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

Что если я хочу сделатьэлемент настолько широкий, насколько это необходимо (Процентное соотношение по отношению к родительскому элементу создает большую вертикальную рамку, поэтому я не могу сказать, что оно должно идти width: 100%)

И центрировано под родительским элементом (left: -50% результатыпри этом 50% родительского элемента перемещается влево, а не по центру)

Возможно ли это без JavaScript?(Если нет, существуют ли магические селекторы или функции для получения ширины того или иного и calc() правильных значений?

Answer 1

Вы можете переместить всплывающую подсказку в одну строку, используя 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.

Этот метод не практичен для встроенных всплывающих подсказок, но хорошо работает для кнопок и ссылок "призыв к действию".

Answer 2

.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