A Pen by Joe Watkins.

Bootstrap-Checkbox-w-Tooltip.markdown

Bootstrap Checkbox w/Tooltip

A simple/reusable inline checkbox with a tooltip exposing fine print. Bootstrap 3.0

A Pen by Joe Watkins on CodePen.

License.

index.html

<h1>Checkbox with Tooltip</h1>

<form action="#" method="post">
  <p>
    <label for="FullName"><em>*</em> Full Name</label>  <br />
    <input type="text" id="FullName" name="FullName">
  </p>

  <p>
    <label for="EmailAddress"><em>*</em> Email Address</label><br />
    <input type="text" id="EmailAddress" name="EmailAddress">
  </p>

<!-- cool stuff here -->
  <p class="campaign-signup with-tooltip">
    <label for="CampaignList_44479"> <input checked="checked" name="CampaignList_44479" id="CampaignList_44479" type="checkbox"> Signup for newsletter <a href="#" class="icon-question-sign" data-original-title="We will not share your information with anyone., but if you'd like to opt out of our email list, you can easily do so by following the instructions in any email you receive." data-placement="right" data-toggle="tooltip"></a></label>
  </p>
<!--// cool stuff here -->
  
  <button type="button" class="btn btn-primary">Submit Form</button>
  
</form>

script.js

 $("a[data-toggle='tooltip']").tooltip();

style.scss

@import "compass";
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");

body {
  background:#2c3e50;
  color:#ecf0f1;
  font-size:2em;
  padding:50px;
}

p.campaign-signup.with-tooltip {

  label {
    font-weight:normal;
    &:hover {
      cursor:pointer;
    }
  }
  
  input {
    vertical-align: bottom;
    position: relative;
    top: -6px;
  }
  
  a[data-toggle='tooltip']{
    color:#f1c40f;
  }
  
  a[class*='icon-']:hover {
    text-decoration:none !important;
    border:none;
    outline:none;
  }
 
}