Всплывающая подсказка с вводом формы

Question

Я пытаюсь добавить простую всплывающую подсказку справа от ввода формы, но не могу остановить ее падение ниже.Я пробовал встроенный блок, но это не помогло.

<div class="form-group row">
  <label class="control-label col-sm-2">Size</label>
  <div class="col-sm-7">
    <input id="" style="display: inline;" type="text" class="form-control item-field" placeholder="Add max size here" name="size" required>
    <a href="#" data-tooltip="This is the absolute maximum size of your item. Don't worry about different configurations here.">?</a>
  </div>
</div>

Любая помощь высоко ценится.

Answer 1

Используйте css, чтобы показать всплывающую подсказку.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 170px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<div class="form-group row">
  <label class="control-label col-sm-2">Size</label>
  <div class="col-sm-7">
    <input id="" style="display: inline;" type="text" class="form-control item-field" placeholder="Add max size here" name="size" required>
    <a href="#" class="tooltip">
    ?
     <span class="tooltiptext">"This is the absolute maximum size of your item. Don't worry about different configurations here."</span>
    </a>
   
  </div>
</div>

Источник