<!-- links -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="bootstrap.min.css">

    <!-- tippy css -->
    <link rel="stylesheet" href="tippy.css">

    <!-- form -->
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1" class="tooltip-wrapper">Email address
                <i class="ml-2 fa fa-info-circle text-primary my-tooltip"
                    data-tooltip="Email should be valid!"></i>
            </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
                <i class="ml-2 fa fa-info-circle text-primary my-tooltip"
                    data-tooltip="Password should be consist of 8 letters and atleast 1 special character!"></i>
            </label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group">
            <label for="exampleInputLongTooltip1" class="tooltip-wrapper">Long Tooltip
                <i class="ml-2 fa fa-info-circle text-primary my-tooltip"
                    data-tooltip="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quasi ut non 
                    labore voluptas odit! Fugiat quaerat recusandae, ut eos accusantium ipsum. Enim numquam cumque
                     consequuntur provident doloremque rerum dicta!"></i>
            </label>
            <input type="LongTooltip" class="form-control" id="exampleInputLongTooltip1">
        </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
                <i class="ml-2 fa fa-info-circle text-primary my-tooltip"
                    data-tooltip="Check for remember credentials!"></i>
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <!-- scripts -->
    <script src="jquery.slim.min.js"></script>
    <script src="bootstrap.bundle.min.js"></script>

    <!-- tippy js -->
    <script src="popper.min.js"></script>
    <script src="tippy-bundle.umd.min.js"></script>

    <!-- js code -->
    <script type="text/javascript">
        /* Tooltip initalization */

        /* Placement of the tooltip */
        let placement = "top";
        //let placement = "top-start";
        //let placement = "top-end";
        //let placement = "right";
        //let placement = "right-start";
        //let placement = "right-end";
        //let placement = "bottom";
        //let placement = "bottom-start";
        //let placement = "bottom-end";
        //let placement = "left";
        //let placement = "left-start";
        //let placement = "left-end";

        /* Arrows of the tooltip */
        //let arrow = "Default";
        //let arrow = "Round";
        //let arrow = "Large";
        //let arrow = "Small";
        //let arrow = "Wide";
        let arrow = "Narrow";

        /* Theme of the tooltip */
        //let theme = "light";
        //let theme = "light-border";
        //let theme = "material";
        let theme = "translucent";

        /* Interactive tooltip */
        let interactive = false;

        /* Interactive tooltip */
        let animation = 'scale';
        //let animation= 'shift-away';
        //let animation= 'shift-toward';
        //let animation= 'perspective';

        $('.my-tooltip').each(function (idx, icon) {
            let content = $(icon).data('tooltip');
            tippy(icon, {
                content: content,
                placement: placement,
                arrow: true,
                theme: theme,
                interactive: interactive,
                animation: animation,
            });
        });
    </script>