<style type="text/css">
        .tooltip-wrapper {
            display: flex;
        }

        .tooltip-text {
            display: block;
            position: relative;
            font-size: 1em;
            border-radius: 100%;
            color: #FFF;
            height: 0;
            margin-left: 6px;
            margin-right: 6px;
        }

        .tooltip-text:before,
        .tooltip-text:after {
            position: absolute;
            content: '';
            opacity: 0;
            transition: all 0.4s ease;
        }

        .tooltip-text:before {
            border-width: 10px 8px 0 8px;
            border-style: solid;
            border-color: #ffc107 transparent transparent transparent;
            top: -10px;
            transform: translateY(20px);
        }

        .tooltip-text:after {
            content: attr(data-tooltip);
            position: relative;
            background: #ffc107;
            height: auto;
            font-size: 0.9em;
            font-weight: 500;
            top: -2.5rem;
            left: -1.4rem;
            padding: 10px;
            border-radius: 5px;
            letter-spacing: 1px;
            transform: translateY(20px);
            visibility: hidden;
        }

        .tooltip-text:hover::before,
        .tooltip-text:hover::after {
            opacity: 1;
            transform: translateY(-2px);
        }

        .tooltip-text:hover::after {
            position: relative;
            visibility: visible;
        }
    </style>

    ------------------------------- html -------------------------------
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1" class="tooltip-wrapper">Email address
                <span class="tooltip-text" data-tooltip="Email should be valid!">
                    <i class="fa fa-info-circle text-primary"></i>
                </span>
            </label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1" class="tooltip-wrapper">Password
                <span class="tooltip-text"
                    data-tooltip="Password should be consist of 8 letters and atleast 1 special character!">
                    <i class="fa fa-info-circle text-primary"></i>
                </span>
            </label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label tooltip-wrapper" for="exampleCheck1">Check me out
                <span class="tooltip-text" data-tooltip="Check for remember credentials!">
                    <i class="fa fa-info-circle text-primary"></i>
                </span>
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>