Form input and tooltip

Form input with a tooltip inline

Example

Mark-up

<form>
    <!-- inline -->
    <div class="slb-form__group-inline">
        <input type="text" class="slb-form__control" id="exampleInputText-slb-form__control">
        <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
        <span class="slb-form__bar"></span>
    </div>
    <button class="slb-tooltip" data-toggle="tooltip" title='Tool tip text here' data-placement="right">
        <svg viewBox="0 0 512 512"><title>info-circle</title><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>
    </button>


    <!-- flex -->
    <div class="d-flex">
        <div class="slb-form__group w-100">
            <input type="text" class="slb-form__control" id="exampleInputText-slb-form__control">
            <label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
            <span class="slb-form__bar"></span>
        </div>
        <button class="slb-tooltip" data-toggle="tooltip" title="Tool tip text here" data-placement="right">
            <svg viewBox="0 0 512 512"><title>info-circle</title><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>
        </button>
    </div>
</form>

Dependencies

• Form Input
• Tooltip
• Bootstrap utilities