ToolTips

.tooltip {
    display: inline;
    position: relative;

    &:hover:before {
        border: solid;
        border-color: #fcc52b transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }

    &:hover:after {
        background: #fcc52b;
        border-radius: 5px;
        bottom: 26px;
        color: #4c4c4c;
        font-weight: bold;
        text-align: center;
        content: attr(tooltip);
        left:0%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: 200px;
        text-decoration:none;
    }
}

/* Adjustment for Buttons */
.btn.tooltip {
    &:hover:before {
        bottom: 35px;
    }

    &:hover:after {
        bottom: 41px;
    }
}

<div class="carlislesyntec example">
    <p class="body-text tooltip" href="#do-nothing" tooltip="Here's A Tip, Use a Tool Tip">Tool Tip Over Text</p>
</div>

<div class="carlislesyntec example">
    <a class="text-link tooltip" href="#do-nothing" tooltip="Here's A Tip, Use a Tool Tip">Tool Tip Over a Link</a>
</div>

<div class="carlislesyntec example">
    <label class="checkbox-label tooltip" tooltip="Here's a Tip, Use a Tool Tip" for="cb1">
        <input id="cb1" type="checkbox" />
        Tool Tip Over a Form Element
    </label>
</div>

<div class="carlislesyntec example">
    <button class="btn btn-primary tooltip" type="button" tooltip="Here's A Tip, Use a Tool Tip">Tool Tip Over a Button</button>
</div>

Anything can have a tool tip if you add the class ".tooltip" to the element, and then give it an attribute of tooltip="your tool tip text here."
Be aware though, some elements may need custom CSS for the tool tip to display properly. For example, the buttons needed adjustments in the css. See the above code for solution.
Do not use a title tag with a tool tip item as they counteract each other. It's best to use one or the other.
The arrow in the tool tip will remain centered but the content window appears left aligned with the object.
The tool tip content window requires a set width, or else it stacks all the words within the tool tip.