position: fixed doesn't work in Google Chrome and Opera

Question

position: fixed doesn't work in Google Chrome and Opera

I can't position the tooltip in any browser except FireFox.

I'm trying to style a tooltip - title with the tooltip class:

The html has a list with items like this:

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

In css:

.tooltip:hover:after{
    bottom: 26px;
    color: #fff;
    content: attr(title);
    right: 10%;

   position: fixed;
    padding: 5px 15px;

    z-index: 98;}

I use position here:fixed, so that my tooltip is displayed when hovering in the lower-right corner of the viewport.

So, I have a hint displayed in the right place only in Firefox.

In Chrome and Opera, the tooltip is not positioned and is displayed directly below the element that the cursor is hovering over.

Please help me fix this jamb. Thanks!

0

css position fixed

Author: Квартиры Петербург, 2019-07-21

Source

1 answers

score 1 · Accepted Answer

For example, like this...

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>