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

Question

всем привет! Мудрый человек из прошлого вопроса дал код, получилось то что получилось. В общем оно работает так как я хотел, кроме пары моментов.

Как сделать так что бы расстояние между строками было меньше?
Текст почему то просвечивает сквозь изображение.
Как сделать так что бы всплывающая подсказка не выходила за пределы окна?

Прошу вас не гневаться, это мой первый опыт работы с html и css :)

код:

<!DOCTYPE html>
<html>
<style>
    body * {
        display: inline-block;
    }

    .tooltiped {
        position: relative;
    }

    .tooltiped .tooltip {
        position: absolute;
        max-width: 500px;
        min-width: 200px;

        left: 0px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transition: ease 0.11s;
    }

    .tooltiped:hover .tooltip {
        padding-top: 2em;
        visibility: visible;
        opacity: 1;
    }

    .tooltiped .tooltip .tooltip-content {
        max-width: 300px;
        min-width: 200px;
        z-index: 10;
        display: block;
        background-color: #3989c9 ;
        padding: 0.5em;
        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>Тестовый текст. Допустим у нас есть</p>
    <div class="tooltiped">
        <p>Квентин Тарантино Тарантинович</p>
        <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" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

            </div>
        </div>
    </div>
    и мы хотим снять с ним кино в духе
    <div class="tooltiped">
        <p>Рика и Морти</p>
        <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" width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
            </div>
        </div>
    </div>
    <br/>Таким образом мы должны взять на главную роль
    <div class="tooltiped">
        <p>Кристиана Бейла</p>
        <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" width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
            </div>
        </div>
    </div>
    </br>
    ???
    </br>
    PROFIT
    </p>
</body>

</html>```

Answer 1

Вам не хватает свойства z-index, которое определяет положение позиционированного элемента и его дочерних элементов. Позиционированные элементы с большим значением z-index будут перекрывать элементы с меньшим значением. В вашем случае z-index нигде не был указан, поэтому текст наложился на тултип.

  .tooltiped .tooltip {
      position: absolute;
      max-width: 500px;
      min-width: 200px;
      z-index: 1; /** будет поверх элемента с z-index: 0 */
      left: 0px;
      top: 0px;
      visibility: hidden;
      opacity: 0;
      transition: ease 0.11s;
  }

После добавления этого свойства тултип не будет перекрываться:

body * {
  display: inline-block;
}

.tooltiped {
  position: relative;
}

.tooltiped .tooltip {
  position: absolute;
  max-width: 500px;
  min-width: 200px;
  z-index: 1;
  left: 0px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transition: ease 0.11s;
}

.tooltiped:hover .tooltip {
  padding-top: 2em;
  visibility: visible;
  opacity: 1;
}

.tooltiped .tooltip .tooltip-content {
  max-width: 300px;
  min-width: 200px;
  z-index: 10;
  display: block;
  background-color: #3989c9;
  padding: 0.5em;
  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;
}

<body>
  <p>Тестовый текст. Допустим у нас есть</p>
  <div class="tooltiped">
    <p>Квентин Тарантино Тарантинович</p>
    <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" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист,
        актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

      </div>
    </div>
  </div>
  и мы хотим снять с ним кино в духе
  <div class="tooltiped">
    <p>Рика и Морти</p>
    <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" width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином
        Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
      </div>
    </div>
  </div>
  <br/>Таким образом мы должны взять на главную роль
  <div class="tooltiped">
    <p>Кристиана Бейла</p>
    <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" width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии
        киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
      </div>
    </div>
  </div>
  </br>
  ???
  </br>
  PROFIT
</body>

Подробнее про z-index можно прочитать в топике на MDN.

Answer 2

Теги <style></style> и <title></title> следует помещать в тег <head></head>.

Также у Вас последний закрывающийся тег </p> не имеет открывающего тега <p>, добавьте его или удалите закрывающийся тег.

И в целом Вы неправильно используете теги.

<p></p> нужно использовать для абзаца, им следует обернуть весь Ваш текст:

<p>Тестовый текст. Допустим у нас есть Квентин Тарантино Тарантинович и мы хотим снять с ним кино в духе Рика и Морти. Таким образом мы должны взять на главную роль Кристиана Бейла.</p>

Или так (если Ваш текст состоит из несколько абзацев):

<p>Тестовый текст. Допустим у нас есть Квентин Тарантино Тарантинович и мы хотим снять с ним кино в духе Рика и Морти.</p>
<p>Таким образом мы должны взять на главную роль Кристиана Бейла.</p>

Далее уже оборачиваем необходимые слова в <span></span> и внутри них верстаем наши подсказки.

Расстояние между строками у Вас такое, потому что Вы неправильно использовали теги для абзацев <p></p> и помещали в них отдельные фразы, так делать не стоит. У этого тега по стандарту имеются margin, из-за них у Вас и получаются такие расстояния между строками. Когда оформите абзацы правильно - такой проблемы не будет. В дальнейшем же расстояние между строками регулируется с помощью свойства line-height в css.
Для того, чтобы текст не просвечивал сквозь изображения нужно использовать свойство z-index в css (например z-index: 2). По умолчанию оно установлено на auto.
Без JavaScript я не нашёл решения как сделать так, чтобы подсказка не уходила за пределы экрана.

Я сам только учусь, мой JS пока очень плох, набросал следующий вариант реализации, но уверен можно сделать всё в разы лучше: https://jsfiddle.net/8x2e7rk9/

БЛОГ НА HUSL

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

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