Aligning the popup at the center of the text area in label element

Question

I have a label element, whose width is much larger than the actual text. So, the popover I am displaying is at the center of the label element but not at the center of the text area.

I want my popover message to be displayed directly under the text label. Can I attach a onmouseover event to the text label and not the dom? Or can it be done using css?

The text of label isn't centered? Do you have actual code? Maybe in a [mcve]? — zer00ne, Dec 08 '16 at 01:28
I won't be able to share the code, but the text in the label is right aligned in order to be close to the date element as seen in the snapshot. — kosta, Dec 08 '16 at 01:31

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

Yes, you can adjust the width in your CSS file.
Check this link. It helps you - https://stackoverflow.com/a/2820603/7004388

edited May 23 '17 at 12:13

Community

1
1

answered Dec 08 '16 at 01:22

coderpc

4,119
6
51
93

score 0 · Accepted Answer · answered Dec 08 '16 at 02:01

0

I created a span element for the text within the label element and then add hover event on the span element.

answered Dec 08 '16 at 02:01

kosta

4,302
10
50
104

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I can only show you what I think it should be like, and whatever you might've done wrong could not be addressed since no code is provided. Usually I vote to close questions without code, but I never made custom CSS tooltips before.

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>

Aligning the popup at the center of the text area in label element

3 Answers3

SNIPPET