CODEWITHSUNDEEP
htmlforms
Dan E
Dan E

Reputation: 177

Tooltip inline with form input

I'm trying to add a simple tooltip sitting just to the right of my form input, but I can't stop it dropping below. I have tried inline-block but that doesn't seem to fix it.

<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>

Any help much appreciated.

Upvotes: 1

Views: 8193

Answers (1)

Saeed
Saeed

Reputation: 5488

Use css to show tooltip is an easy way

.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>

Source

Upvotes: 1

Related Questions