CCM Web Design Standards

Tool Tips

Tool Tip Over Text

.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="versico 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="versico 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="versico 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="versico 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.