Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Formularelemente Mehrfachauswahl

Verwendung

Verwendung innerhalb von Formularen zur Mehrfachauswahl.

Vorschau

HTML

                
                  <div class="container">
  <div class="form">
    <div class="errors_wrapper">
      <div class="cms_common_errors">
        <div>
          <b>Hinweis:</b> Bitte prüfen Sie das Formular auf Fehler und korrigieren Sie diese.
        </div>
      </div>
    </div>
    <fieldset class="">
      <h3 class="fieldset_title">Hauptinteresse</h3>
      <div class="fieldset_inner">
        <div class="fields_wrapper">
          <div class="field_wrapper field_full field_checkboxes">
            <div class="field_wrapper_inner">
              <label class="cms_common_error">Mein Hauptinteresse besteht an:<span class="cms_common_mandatory_asterisk"> *</span></label>
              <div class="form_field">
                <div class="cms_gui_checkboxes">
                  <div class="checkboxes_wrapper row">
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="303" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Wärmedämmung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="304" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Sanierung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="305" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Passivhaus</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="306" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Stahlbau</span></label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="307" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Trittschalldämmung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="308" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Bewehrungstechnik</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="309" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Glasfaserbewehrung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="310" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Schalungstechnik</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <i class="error" data-toggle="tooltip" data-placement="top" title="" data-original-title="Darf nicht leer sein"></i>
            </div>
          </div>
          <div class="field_wrapper field_full field_checkboxes">
            <div class="field_wrapper_inner">
              <label>Mein Hauptinteresse besteht an:</label>
              <div class="form_field">
                <div class="cms_gui_checkboxes">
                  <div class="checkboxes_wrapper row">
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="303" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Wärmedämmung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="304" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Sanierung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="305" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Passivhaus</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="306" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Stahlbau</span></label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="307" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Trittschalldämmung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="308" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Bewehrungstechnik</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="309" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Glasfaserbewehrung</span>
                      </label>
                    </div>
                    <div class="checkbox_wrapper col-xs-12 col-sm-6">
                      <label>
                        <input type="checkbox" value="310" class="cms_gui_checkboxes" tabindex="21">
                        <span class="labeltext">Schalungstechnik</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</div>

CSS

              @charset "UTF-8";
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper {
  margin-bottom: 14px;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper:last-child {
  margin-bottom: 0;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper label {
  cursor: pointer;
  margin-bottom: 0;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper label .labeltext {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 19px;
  line-height: 1.1875rem;
  font-family: 'Corpid_TT5_Regular', Arial;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  position: relative;
  padding-left: 31px;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper label .labeltext:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0069b4;
  font-size: 10px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 12px;
  text-align: center;
  border-radius: 3px;
  background-color: #fff;
  border: solid 1px #d9d9d9;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper label input {
  display: none;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper label input:checked + .labeltext:before {
  content: "";
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper.disabled {
  opacity: 0.5;
}
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper.disabled label,
.form .cms_gui_checkboxes .checkboxes_wrapper .checkbox_wrapper.disabled input {
  cursor: auto;
}
.form input[type=checkbox].cms_gui_checkbox {
  display: none;
}
.form input[type=checkbox].cms_gui_checkbox + .styled_checkbox {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0069b4;
  font-size: 10px;
  display: block;
  position: absolute;
  left: 0;
  top: 2px;
  content: '';
  width: 19px;
  height: 19px;
  line-height: 19px;
  margin-right: 12px;
  text-align: center;
  z-index: 10;
  border-radius: 3px;
  background-color: #fff;
  border: solid 1px #d9d9d9;
}
.form input[type=checkbox].cms_gui_checkbox:checked + .styled_checkbox:before {
  content: "";
}

input {
  -moz-appearance: none;
  -webkit-appearance: none;
}
input::-webkit-input-placeholder {
  color: #b3b3b3 !important;
}
input:-moz-placeholder {
  color: #b3b3b3 !important;
}
input::-moz-placeholder {
  color: #b3b3b3 !important;
}
input:-ms-input-placeholder {
  color: #b3b3b3 !important;
}

.form .content_wrapper {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .form .content_wrapper {
    margin-bottom: 30px;
  }
}
.form .errors_wrapper {
  background-color: #fff2f3;
  border: 1px dashed #d50101;
  color: #d50101;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 19px;
  line-height: 1.1875rem;
  border-radius: 6px;
  margin-bottom: 55px;
  padding: 10px;
}
.form .errors_wrapper .cms_common_errors > div {
  margin-bottom: 5px;
}
.form .errors_wrapper .cms_common_errors > div.cms_common_errors_title {
  margin-bottom: 15px;
}
.form fieldset {
  position: relative;
}
.form fieldset:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
  background-image: -moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-size: 100%;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
}
.form fieldset .fieldset_title {
  background-color: #fff;
  display: inline-block;
  padding-right: 10px;
  position: relative;
  text-align: left;
  top: -13px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 25px;
  line-height: 1.5625rem;
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_title {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 400px) {
  .form fieldset .fieldset_title {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 350px) {
  .form fieldset .fieldset_title {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_title {
    top: -10px;
  }
}
.form fieldset .fieldset_inner {
  margin-top: -24px;
  padding: 55px 0;
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_inner {
    margin-top: -19px;
  }
}
.form fieldset.no_title .fieldset_inner {
  margin-top: 0;
}
.form fieldset:last-child .fieldset_inner:not(.keep-space) {
  padding-bottom: 0;
}
.form fieldset.controls .mandatory_notice {
  color: #7c7c7b;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 14px;
  line-height: 0.875rem;
  text-align: center;
}
.form fieldset.controls .button_wrapper {
  text-align: right;
}
.form fieldset.controls .button_wrapper .btn {
  margin-top: 10px;
}
.form .fields_wrapper .field_wrapper {
  margin-bottom: 22px;
}
.form .fields_wrapper .field_wrapper:last-child {
  margin-bottom: 0;
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner {
  position: relative;
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner i.error {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  right: 15px;
  z-index: 100;
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner i.error:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner i.error:before {
  color: #d50101;
}
.form .fields_wrapper .field_wrapper.field_checkbox .field_wrapper_inner {
  position: relative;
}
.form .fields_wrapper .field_wrapper.field_checkbox .field_wrapper_inner label {
  padding-left: 31px;
  z-index: 11;
  position: relative;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 19px;
  line-height: 1.1875rem;
  font-family: 'Corpid_TT5_Regular', Arial;
  font-weight: normal;
  font-style: normal;
  cursor: pointer;
  display: inline-block;
}
.form .fields_wrapper .field_wrapper.field_checkbox .field_wrapper_inner label.cms_common_error {
  color: #d50101;
  padding-right: 44px;
}
.form .fields_wrapper .field_wrapper.field_checkbox .field_wrapper_inner label.cms_common_error .cms_common_mandatory_asterisk {
  color: #d50101;
}
@media screen and (max-width: 767px) {
  .form .fields_wrapper .field_wrapper.field_checkbox .field_wrapper_inner i.error {
    display: none;
  }
}
.form .fields_wrapper .field_wrapper.field_checkboxes .field_wrapper_inner > label {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 19px;
  line-height: 1.1875rem;
  font-family: 'Corpid_TT5_Regular', Arial;
  font-weight: normal;
  font-style: normal;
  margin-bottom: 10px;
  display: inline-block;
}
.form .fields_wrapper .field_wrapper.field_checkboxes .field_wrapper_inner label.cms_common_error {
  color: #d50101;
}
.form .fields_wrapper .field_wrapper.field_checkboxes .field_wrapper_inner label.cms_common_error .cms_common_mandatory_asterisk {
  color: #d50101;
}
.form .fields_wrapper .field_wrapper.field_checkboxes .field_wrapper_inner i.error {
  transform: none;
  top: 0;
}
.form .fields_wrapper .field_wrapper.field_checkboxes.field_full .checkboxes_wrapper .checkbox_wrapper:nth-of-type(2n) + .radiobutton_wrapper {
  clear: both;
}
.form .cms_common_mandatory_asterisk {
  color: #0069b4;
}

.tooltip {
  padding: 0 !important;
}
.tooltip .tooltip-inner {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  color: #4c4c4c;
  margin-bottom: 15px;
  max-width: 100vw;
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 15px;
}
.tooltip .tooltip-inner img {
  height: auto;
  max-width: 100%;
}
.tooltip .tooltip-arrow {
  background-color: #fff;
  height: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
}
.tooltip.top .tooltip-arrow {
  border: none;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  bottom: 5px;
  margin: 0;
}
.tooltip.bottom .tooltip-inner {
  margin-bottom: 0;
  margin-top: 15px;
}
.tooltip.bottom .tooltip-arrow {
  border: none;
  border-left: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  margin: 0;
  top: 5px;
}

SCSS

              @import "../general/_general";

$form-border-grey:#d9d9d9;
$form-border-grey-focus:#939393;
$form-error-background:#fff2f3;
$form-error-text:#d50101;

.form {
  .cms_gui_checkboxes{
    .checkboxes_wrapper {
      .checkbox_wrapper {
        margin-bottom:14px;

        &:last-child {
          margin-bottom:0;
        }

        label {
          cursor:pointer;
          margin-bottom:0;

          .labeltext {
            @include rem-font-size(14);
            @include rem-line-height(19);
            @include corpid-regular;
            display:inline-block;
            position:relative;
            padding-left:31px;

            &:before {
              @include schoeck-iconfont;
              color:$blue;
              font-size:10px;
              display:block;
              position:absolute;
              left:0;
              top:0;
              content:'';
              width:20px;
              height:20px;
              line-height:20px;
              margin-right:12px;
              text-align:center;
              @include border-radius(3px);
              background-color:$white;
              border:solid 1px $form-border-grey;
            }
          }
          input {
            display:none;

            &:checked + .labeltext {
              &:before {
                content:$icon-check;
              }
            }
          }
        }

        &.disabled {
          opacity:0.5;

          label,
          input {
            cursor:auto;
          }
        }
      }
    }
  }

  input[type=checkbox] {
    &.cms_gui_checkbox {
      display:none;

      & + .styled_checkbox {
        @include schoeck-iconfont;
        color:$blue;
        font-size:10px;
        display:block;
        position:absolute;
        left:0;
        top:2px;
        content:'';
        width:19px;
        height:19px;
        line-height:19px;
        margin-right:12px;
        text-align:center;
        z-index:10;
        @include border-radius(3px);
        background-color:$white;
        border:solid 1px $form-border-grey;
      }

      &:checked + .styled_checkbox {
        &:before {
          content:$icon-check;
        }
      }
    }
  }
}

input {
  @include placeholder {
    color:$grey !important;
  }
  -moz-appearance:none;
  -webkit-appearance:none;
}

.form {
  .content_wrapper {
    margin-bottom:50px;

    @media screen and (max-width:767px) {
      margin-bottom:30px;
    }
  }

  .errors_wrapper {
    background-color:$form-error-background;
    border:1px dashed $form-error-text;
    color:$form-error-text;
    @include rem-font-size(14);
    @include rem-line-height(19);
    @include border-radius(6px);
    margin-bottom:55px;
    padding:10px;

    .cms_common_errors {
      > div {
        margin-bottom:5px;

        &.cms_common_errors_title {
          margin-bottom:15px;
        }
      }
    }
  }

  fieldset {
    position:relative;

    &:before {
      background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…Igd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
      background-image:-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
      background-image:-moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-image:-webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-image:linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-size:100%;
      content:'';
      display:block;
      height:1px;
      width:100%;
    }

    .fieldset_title {
      background-color:$white;
      display:inline-block;
      padding-right:10px;
      position:relative;
      text-align:left;
      top:-13px;

      @include rem-font-size(20);
      @include rem-line-height(25);

      @media screen and (max-width:767px) {
        @include rem-font-size(18);
        @include rem-line-height(22);
      }

      @media screen and (max-width:400px) {
        @include rem-font-size(17);
        @include rem-line-height(21);
      }

      @media screen and (max-width:350px) {
        @include rem-font-size(16);
        @include rem-line-height(20);
      }

      @media screen and (max-width:767px) {
        top:-10px;
      }
    }

    .fieldset_inner {
      margin-top:-24px;

      padding:55px 0;

      @media screen and (max-width:767px) {
        margin-top:-19px;
      }
    }

    &.no_title {
      .fieldset_inner {
        margin-top:0;
      }
    }

    &:last-child {
      .fieldset_inner:not(.keep-space) {
        padding-bottom:0;
      }
    }

    &.controls {
      .mandatory_notice {
        color:$darkgrey;
        @include rem-font-size(12);
        @include rem-line-height(14);
        text-align:center;
      }
      .button_wrapper {
        text-align:right;

        .btn {
          margin-top:10px;
        }
      }
    }
  }

  .fields_wrapper {
    .field_wrapper {
      margin-bottom:22px;

      &:last-child {
        margin-bottom:0;
      }

      .field_wrapper_inner {
        position:relative;

        i {
          &.error {
            @include autocenterY();
            position:absolute;
            right:15px;
            @include schoeck-icon($icon-info);
            z-index:100;

            &:before {
              color:$form-error-text;
            }
          }
        }
      }

      &.field_checkbox {
        .field_wrapper_inner {
          position:relative;

          label {
            padding-left:31px;
            z-index:11;
            position:relative;

            @include rem-font-size(14);
            @include rem-line-height(19);
            @include corpid-regular;
            cursor:pointer;
            display:inline-block;

            &.cms_common_error {
              color:$form-error-text;
              padding-right:44px;

              .cms_common_mandatory_asterisk {
                color:$form-error-text;
              }
            }
          }

          i.error {
            @media screen and (max-width:$screen-xs-max) {
              display:none;
            }
          }
        }
      }

      &.field_checkboxes {
        .field_wrapper_inner {
          > label {
            @include rem-font-size(14);
            @include rem-line-height(19);
            @include corpid-regular;
            margin-bottom:10px;
            display:inline-block;
          }

          label {
            &.cms_common_error {
              color:$form-error-text;

              .cms_common_mandatory_asterisk {
                color:$form-error-text;
              }
            }
          }

          i {
            &.error {
              @include transform(none);
              top:0;
            }
          }
        }

        &.field_full {
          .checkboxes_wrapper {
            .checkbox_wrapper {
              &:nth-of-type(2n) {
                & + .radiobutton_wrapper {
                  clear:both;
                }
              }
            }
          }
        }
      }

    }
  }

  .cms_common_mandatory_asterisk {
    color:$blue;
  }
}

.tooltip {
  padding:0 !important;

  .tooltip-inner {
    background-color:$white;
    border:1px solid $lightgrey;
    color:$darkergrey;
    margin-bottom:15px;
    max-width:100vw;
    @include border-radius(3px);
    @include box-shadow(0 0 20px rgba(0, 0, 0, .1));
    padding:15px;

    img {
      height:auto;
      max-width:100%;
    }
  }

  .tooltip-arrow {
    background-color:$white;
    height:20px;
    left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:20px;
  }

  &.top {
    .tooltip-arrow {
      border:none;
      border-bottom:1px solid $lightgrey;
      border-right:1px solid $lightgrey;
      bottom:5px;
      margin:0;
    }
  }

  &.bottom {
    .tooltip-inner {
      margin-bottom:0;
      margin-top:15px;
    }
    .tooltip-arrow {
      border:none;
      border-left:1px solid $lightgrey;
      border-top:1px solid $lightgrey;
      margin:0;
      top:5px;
    }
  }
}

JavaScript

                jQuery(document).ready(function () {
  jQuery('.form [data-toggle="tooltip"]').tooltip({
    container: 'body',
    html: true
  });
});