position: fixed не работает в Google Chrome и Opera

112
19 апреля 2021, 04:40

Никак не могу позиционировать всплывающую подсказку ни в одном браузере, кроме FireFox.

Я пытаюсь стилизовать всплывающую подсказку - title с классом tooltip:

В html есть список с такими пунктами, как этот: 

<li> 
    <a href='https://сайт.ru/страница.html' title='Специальный раздел'
    class='tooltip'> 
    <h3 class='title_block'>Раздел сайта</h3> 
</a> 
</li>

В css: 

.tooltip:hover:after{
    bottom: 26px;
    color: #fff;
    content: attr(title);
    right: 10%;
   position: fixed;
    padding: 5px 15px;
    z-index: 98;}

Я использую здесь position:fixed, чтобы моя подсказка отображалась при наведении в правом нижнем углу вьюпорта.

Так вот, у меня подсказка отображается в нужном месте только в Firefox.

В Chrome и Opera подсказка не позиционируется и отображается прямо под элементом, на который наводится курсор.

Помогите, пожалуйста, исправить этот косяк. Спасибо!

Answer 1

Например вот так...

a { 
  text-decoration: none; 
  font-size: 22px; 
} 
 
a:hover:after { 
  content: attr(data-title); 
  position: fixed; 
  right: 10px; 
  top: 10px; 
  padding: 10px 30px; 
  background: tomato; 
  color: #fff; 
  font-size: 16px; 
}
<a href="" data-title="специальный раздед"> специальный раздел</a>

READ ALSO
Как std::iostream узнаёт, когда надо делать flush()?
c++

Как std::iostream узнаёт, когда надо делать flush()?

Как std::iostream узнаёт, когда надо делать flush() (не указывая это вручную манипуляторами или явным вызовом)?

 88
Использование и обращение к std::pair в std::map?
c++

Использование и обращение к std::pair в std::map?

Допустим, есть map - вот такого вида:

 80
Считывание данных
c++

Считывание данных

Как обработать строку что-бы получился массив чисел?

 109
Ссылки и временные объекты
c++

Ссылки и временные объекты

Есть такой код:

 126