Issues with Tooltip

by Dzyann

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.1/awesome-bootstrap-checkbox.css">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      Something Else
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 other-check-style ">
      <div class="form-group">
        <div class="checkbox abc-checkbox abc-checkbox-primary">
          <input class="styled" data-val="true" data-val-booleanrequired="SomethingSoemthing" data-val-required="The Something field is required." id="something_id" name="Something" type="checkbox" value="true">
          <label for="something_id">
                                    Something
                                    <a href="https://stackoverflow.com" target="_blank" data-toggle="tooltip" title="StackOverflow">StackOverflow</a>
                                    -
                                    <a href="https://stackexchange.com/" target="_blank" data-toggle="tooltip" title="StackExchange">StackExchange</a>
                                    Stack
                                </label>
        </div>
        <span class="field-validation-valid help-block" data-valmsg-for="Something" data-valmsg-replace="true"></span>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      Something Else
    </div>
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
  margin: 10px;
}

.abc-checkbox {
  @extend .font-hind;
  cursor: default;
  padding-left: 4px;
  margin: 10px 15px 0;
  label {
    color: $violet-b;
    font-weight: $regular;
    display: inline-block;
    padding-left: 20px;
    padding-top: 3px;
    &:focus {
      outline: none;
    }
    a {
      color: $electric-blue;
      font-weight: $medium;
      &hover {
        color: $electric-blue-dark;
      }
    }
    &:before {
      //margin-left: -20px;
      border: 1px solid $grey-line;
      border-radius: 0px;
      background-color: $white;
      outline: none;
    }
  }
}

.abc-checkbox-primary input[type="checkbox"] {
  position: absolute;
}

.abc-checkbox-primary input[type="checkbox"]:checked+label::before {
  background-color: $violet-a;
  border-color: #2f3e93;
}

.abc-checkbox-primary input[type="checkbox"]:disabled+label::before {
  background-color: $grey-line;
  border-color: $grey-b;
  color: $grey-b;
}

.other-check-style .form-group {
  padding-top: 7px;
}

.other-check-style {
  .field-validation-error {
    margin-left: 40px;
  }
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
});