HTML - Позиционирование всплывающей подсказки

Question

Это снова я с самыми нубскими вопросами по HTML/CSS.

В общем есть код, есть три проблемы:

Всплывающая подсказка выпрыгивает за пределы окна когда текст находится сбоку.
Хочется что бы всплывающая подсказка позиционировалась относительно центра фразы которая её вызывает
Так же хотелось бы что бы всплывающая подсказка пропадала как только мышка выходит за пределы слова вызвавшего подсказку. То есть в данном случае получается что Дуэйн Джонсон перекрывает Морти, и это не очень удобно.

код

<!DOCTYPE html>
<html>
<style>
  img * {
    max-height: 100px;
    max-width: 200px;
  }
  
  body * {
    display: inline-block;
  }
  
  .tooltiped {
    position: relative;
  }
  
  .tooltiped .tooltip {
    position: absolute;
    max-width: 300px;
    min-width: 200px;
    z-index: 1;
    left: 0px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transition: ease 0.11s;
  }
  
  .tooltiped:hover .tooltip {
    padding-top: 15px;
    visibility: visible;
    opacity: 1;
  }
  
  .tooltiped .tooltip .tooltip-content {
    max-width: 300px;
    min-width: 200px;
    padding: 0.5em;
    z-index: 10;
    display: block;
    background-color: #3989c9;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    background: #3989c9;
    text-align: center
  }
  
  .tooltiped .tooltip .tooltip-content,
  .tooltiped .tooltip .tooltip-content a {
    color: #fff
  }
</style>
<title>Online HTML Editor</title>

<head>
</head>

<body>
  <p>Тестовый текст. Допустим у нас есть
    <span>
    <div class="tooltiped">
        Квентин Тарантино Тарантинович
    
        
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.film.ru/sites/default/files/filefield_paths/qt8-the-first-eight-arriva-trailer-documentario-tarantino-v4-407203-1280x720.jpg" alt="babababa" max-height="300" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

            </div>
        </div>
    </div>
    </span> и мы хотим снять с ним кино в духе
    <span>
    <div class="tooltiped">
        Рика и Морти
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYELGsc6h5OLMZwb4TB9eqbDi928XIJe9R6A&usqp=CAU" alt="babababa"  max-height="300"  width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
            </div>
        </div>
    </div>
    </span>
    </br>Таким образом мы должны взять на главную роль
    <span>
    <div class="tooltiped">
        Кристиана Бейла
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.mirf.ru/wp-content/uploads/2016/01/bale-start.jpg" alt="babababa"  max-height="300"  width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
            </div>
        </div>
    </div>
    </span> на роль
    <span><div class="tooltiped">
        Рика Санчеза
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://rickandmorty.fandom.com/ru/wiki/%D0%A0%D0%B8%D0%BA_%D0%A1%D0%B0%D0%BD%D1%87%D0%B5%D0%B7"><img src="https://static.wikia.nocookie.net/rickandmorty/images/8/81/%D0%A0%D0%B8%D0%BA_%D0%A1%D0%B0%D0%BD%D1%87%D0%B5%D0%B7_001.jpg/revision/latest/scale-to-width-down/270?cb=20200222114630&path-prefix=ru" alt="babababa"  height="200px"  width="100%"></a></br> Рик Санчес (англ. Rick Sanchez) — один из двух главных героев американского мультсериала «Рик и Морти», созданного Джастином Ройландом и Дэном Хармоном. Рик — гениальный учёный, алкоголик, реалист, атеист и мизантроп; для него характерны цинизм и пренебрежение общепринятыми нормами поведения.
            </div>
        </div>
    </div>
    </span> и
    <span><div class="tooltiped">
        Дуэйна Джонсона
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B6%D0%BE%D0%BD%D1%81%D0%BE%D0%BD,_%D0%94%D1%83%D1%8D%D0%B9%D0%BD"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Dwayne_Johnson_2014%28Cropped%29.jpg/274px-Dwayne_Johnson_2014%28Cropped%29.jpg" alt="babababa" max-height="300" width="100%"></a> Дуэ́йн Ду́глас Джо́нсон (англ. Dwayne Douglas Johnson; род. 2 мая 1972 года, Хейвард, США) — американский киноактёр, предприниматель, музыкант, певец[1], в прошлом — рестлер[2]. Известен под псевдонимом Скала́ (англ. The Rock).
            </div>
        </div>
    </div></span> на роль
    <span><div class="tooltiped">
        Морти
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D1%80%D1%82%D0%B8_%D0%A1%D0%BC%D0%B8%D1%82"><img src="https://upload.wikimedia.org/wikipedia/ru/thumb/c/c3/Morty_Smith.png/129px-Morty_Smith.png" alt="babababa" height="200px" width="100%"></a></br> Мортимер «Морти» Смит (англ. Mortimer «Morty» Smith) — один из главных героев американского комедийного мультсериала «Рик и Морти», внук Рика Санчеса, неуверенный в себе и параноидальный 14-летний подросток, ученик средней школы, образ которого основан на образе Марти Макфлая из научно-фантастической трилогии «Назад в будущее»
            </div>
        </div>
    </div></span>
    </br>
    ???
    </br>
    PROFIT
    </br>
  </p>

</body>

</html>

Answer 1

Зачем дублируете вопросы?

Все Ваши проблемы я решил в своём ответе в Вашем предыдущем вопросе и даже код приложил с решением, посмотрите внимательно:

HTML - Текст просвечивает сквозь всплывающую подсказку

В моём решении:

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

Вот код:

<!DOCTYPE html>
<html>
<head>
    <style>
        .textAndTooltip {
            position: relative;
        }
        
        .textAndTooltip__tooltip {
            display: none;
        }
        
        .textAndTooltip__text {
            cursor: pointer;
            white-space: nowrap;
        }
        
        .textAndTooltip__text:hover + .textAndTooltip__tooltip {
            display: block;
            animation: UpToDown .3s ease;
            animation-fill-mode: forwards;
        }
        
        .textAndTooltip__tooltip:hover {
            display: block;
            animation: UpToDown .3s ease;
            animation-fill-mode: forwards;
        }
        
        @keyframes UpToDown {
            0% {
                opacity: 0;
                top: 0;
            }
            100% {
                opacity: 1;
                top: 1em;
            }
        }
        
        .tooltip {
            position: absolute;
            top: 1em;
            left: 50%;
            transform: translate(-50%, 0);
            max-width: 300px;
            min-width: 200px;
            background-color: #3989c9;
            padding: .5em;
            text-align: center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            color: white;
            z-index: 2;
        }
        
        .tooltip_right {
            left: auto;
            right: 0;
            transform: translate(0, 0);
        }
        
        .tooltip_left {
            left: 0;
            right: auto;
            transform: translate(0, 0);
        }
    </style>
    <title>Online HTML Editor</title>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque rem tempora cum impedit commodi. Voluptas accusantium recusandae dolores, officia quasi. <span class="textAndTooltip"><strong class="textAndTooltip__text">Текст.</strong><span class="textAndTooltip__tooltip tooltip"><a class="tooltip__img" href="https://clck.ru/J36a7" target="_blank"><img src="https://inlnk.ru/1PnAYw" alt="babababa" width="100%"></a><span class="tooltip__text">Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.</span></span></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, fugiat vel dolores error. Sit velit aliquid, corporis. Atque, quasi? Rerum. <span class="textAndTooltip"><strong class="textAndTooltip__text">Текст.</strong><span class="textAndTooltip__tooltip tooltip"><a class="tooltip__img" href="https://inlnk.ru/0QXYjE" target="_blank"><img src="https://inlnk.ru/ND5PAp" alt="babababa" width="100%"></a><span class="tooltip__text">«Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.</span></span></span></p>
</body>
<script>
    function getCoords(elem) {
        let box = elem.getBoundingClientRect();

        return {
            top: box.top + window.pageYOffset,
            right: box.right + window.pageXOffset,
            bottom: box.bottom + window.pageYOffset,
            left: box.left + window.pageXOffset
        };
    }
    
    let textAndTooltip = document.getElementsByClassName('textAndTooltip');
    let tooltip = document.getElementsByClassName('tooltip');
    let tooltipPositionOk = [];
    
    for (let i=0; i<textAndTooltip.length; i++) {
        tooltipPositionOk[i] = false;
        
        textAndTooltip[i].addEventListener('mouseover', function() {
            newPositionTooltip(i);
        });
    }
    
    function newPositionTooltip(i) {
        if (!tooltipPositionOk[i]) {
            tooltipPositionOk[i] = true;
        } else {
            return;
        }
        
        tooltip[i].classList.remove('tooltip_left', 'tooltip_right');
        
        console.log(tooltip[i]);
        
        if (getCoords(tooltip[i]).left < 0) {
            tooltip[i].classList.add('tooltip_left');
        } else if (getCoords(tooltip[i]).right > document.documentElement.clientWidth) {
            tooltip[i].classList.add('tooltip_right');
            
        }
    }
    
    window.addEventListener('resize', function(){
        for (let i=0; i<textAndTooltip.length; i++) {
            tooltipPositionOk[i] = false;
        }
    });
</script>

</html>

БЛОГ НА HUSL

HTML - Позиционирование всплывающей подсказки

Ответы (1 шт):