Блог

Главная - Вопросы по программированию - CSS смещает всплывающую подсказку

CSS смещает всплывающую подсказку

#html #css

#HTML #css

Вопрос:

Я пытаюсь прикрепить всплывающую подсказку к кнопке.

     .hangup_button {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 25px;
    }

    .contained_message {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
    }
    .messageContain:hover .contained_message{
      visibility: visible;
    }  
   <div class="container_div">
    <button class="hangup_button messageContain">
      End Chat
      <span class="contained_message">Terminate session. Charges stop accumulating.</span>
    </button>
  </div>

Проблема, с которой я сталкиваюсь, заключается в том, что всплывающая подсказка появляется внизу кнопки. Я пытаюсь сделать так, чтобы она отображалась в верхней части кнопки. До сих пор я пытался переключить <span class="contained_message"> на начало End Chat текста. Но всплывающая подсказка по-прежнему превышает нижнюю часть кнопки. Я также пытался добавить position: relative; в .contained_message . Кажется, это портит всю кнопку. Что я должен сделать, чтобы всплывающая подсказка отображалась в верхней части кнопки, не выходя за пределы нижней части кнопки?

Комментарии:

1. Что-то с position: absolute будет позиционироваться внутри ближайшего позиционируемого родительского элемента. Если вы хотите, чтобы она располагалась абсолютно внутри кнопки, добавьте свой position: relative в любой .messageContain. или .hangup_button

2. Это поможет для будущих ссылок — w3schools.com/css/css_tooltip.asp

Ответ №1:

Я добавил некоторые изменения, чтобы заставить его работать:

  1. Использовать position: relative для родительского элемента.
  2. Используйте transform: translate , чтобы получить желаемое размещение, а также top: -5px (может быть 0, но -5 дает ему хорошее пространство)
  3. Я изменил его на display: none / block вместо использования видимости, поскольку это может быть более желательно (при условии, что вы не хотите делать переходы).
  4. Чтобы центрировать всплывающую подсказку по горизонтали, left: 50% с translate(-50%, ...) помощью делает трюк.

Рабочий фрагмент:

     .hangup_button {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 25px;
      margin-top: 80px;
      position: relative;
    }

    .contained_message {
      display: none;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      transform: translate(-50%, -100%);
      left: 50%;
      top: -5px;
    }
    .messageContain:hover .contained_message{
      display: block;
    }  
   <div class="container_div">
    <button class="hangup_button messageContain">
      End Chat
      <span class="contained_message">Terminate session. Charges stop accumulating.</span>
    </button>
  </div>