У меня есть элемент метки, ширина которого намного больше, чем фактический текст. Итак, всплывающее окно, которое я отображаю, находится в центре элемента метки, но не в центре текстовой области.

enter image description here

Я хочу, чтобы мой popover message отображался прямо под текстом label. Могу ли я прикрепить событие onmouseover к тексту label, а не к dom? Или это можно сделать с помощью css?

0
kosta 8 Дек 2016 в 04:09

3 ответа

Лучший ответ

Я создал элемент span для текста внутри элемента label, а затем добавил событие hover в элемент span.

0
kosta 8 Дек 2016 в 02:01

Я могу только показать вам, на что я думаю это должно быть, и то, что вы могли сделать неправильно, не может быть решено, так как не предоставлен код. Обычно я голосую, чтобы закрыть вопросы без кода, но я никогда не делал пользовательских всплывающих подсказок CSS.

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>tooltip</title>
  <style>
    .tooltip {
      position: absolute;
      display: inline-block;
      bottom: 1px;
      right: 0;
    }
    .tooltip .text {
      visibility: hidden;
      width: 0;
      font-size: 0;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
      position: absolute;
      z-index: 0;
      top: 120%;
      left: 50%;
      margin-left: -60px;
      transition: all .6s;
    }
    .tooltip .text::after {
      content: " ";
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent black transparent;
    }
    .tooltip:hover .text {
      visibility: visible;
      z-index: 1;
      width: 120px;
      font-size: 16px;
      transition: all .6s;
    }
    label {
      position: relative;
      min-width: 200px;
      line-height: normal;
      display: inline-block;
      cursor: pointer;
      vertical-align: text-top;
      outline: 1px dotted red;
      padding-bottom: 2px;
    }
  </style>
</head>

<body>
  <header></header>
  <section>
    <label for='txt1'>&nbsp;<b class="tooltip"><b class="text">Tooltip Text</b>Label Text</b>
    </label>
    <input id='txt1'>
  </section>
  <footer>&nbsp;</footer>
  <script>
  </script>
</body>

</html>
0
zer00ne 8 Дек 2016 в 02:25

Да, вы можете настроить ширину в своем файле CSS.
Проверьте эту ссылку. Это поможет вам - https://stackoverflow.com/a/2820603/7004388

0
Community 23 Май 2017 в 12:13