Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

Callout

Overview

Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way.

Use a Callout for displaying additional contextual information about an item on the screen. Unlike Tooltips, Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content.

Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the ms-Icon--info "i" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.

Also available in Fabric React

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>

  2. Copy the HTML from one of the samples below into your page. For example:

    <div class="ms-CalloutExample">
  <div class="ms-Callout is-hidden">
    <div class="ms-Callout-main">
      <div class="ms-Callout-header">
        <p class="ms-Callout-title">All of your favorite people</p>
      </div>
      <div class="ms-Callout-inner">
        <div class="ms-Callout-content">
          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
        </div>
        <div class="ms-Callout-actions">
          <a class="ms-Link">Learn more</a> 
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CalloutExample-button">
    <button class="ms-Button">
      <span class="ms-Button-label">Open Callout</span> 
    </button>
  </div>
</div>

  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Callout components on the page:

    <script type="text/javascript">
  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
  for (var i = 0; i < CalloutExamples.length; i++) {
    var Example = CalloutExamples[i];
    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
    var CalloutElement = Example.querySelector(".ms-Callout");
    new fabric['Callout'](
      CalloutElement,
      ExampleButtonElement,
      "right"
    );
  }
</script>

  4. Replace the sample HTML content with your content.

Variants

Default Callout 
<div class="ms-CalloutExample">
  <div class="ms-Callout is-hidden">
    <div class="ms-Callout-main">
      <div class="ms-Callout-header">
        <p class="ms-Callout-title">All of your favorite people</p>
      </div>
      <div class="ms-Callout-inner">
        <div class="ms-Callout-content">
          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
        </div>
        <div class="ms-Callout-actions">
          <a class="ms-Link">Learn more</a> 
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CalloutExample-button">
    <button class="ms-Button">
      <span class="ms-Button-label">Open Callout</span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
  for (var i = 0; i < CalloutExamples.length; i++) {
    var Example = CalloutExamples[i];
    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
    var CalloutElement = Example.querySelector(".ms-Callout");
    new fabric['Callout'](
      CalloutElement,
      ExampleButtonElement,
      "right"
    );
  }
</script>
Close Callout 
<div class="ms-CalloutExample">
  <div class="ms-Callout ms-Callout--arrowLeft  ms-Callout--close is-hidden">
    <div class="ms-Callout-main">
      <button class="ms-Callout-close">
        <i class="ms-Icon ms-Icon--Clear"></i>
      </button>
      <div class="ms-Callout-header">
        <p class="ms-Callout-title">All of your favorite people</p>
      </div>
      <div class="ms-Callout-inner">
        <div class="ms-Callout-content">
          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
        </div>
        <div class="ms-Callout-actions">
          <a class="ms-Link" title="Learn More">Learn More</a> 
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CalloutExample-button">
    <button class="ms-Button">
      <span class="ms-Button-label">Open Callout</span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
  for (var i = 0; i < CalloutExamples.length; i++) {
    var Example = CalloutExamples[i];
    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
    var CalloutElement = Example.querySelector(".ms-Callout");
    new fabric['Callout'](
      CalloutElement,
      ExampleButtonElement,
      "right"
    );
  }
</script>
Action Callout 
<div class="ms-CalloutExample">
  <div class="ms-Callout ms-Callout--actionText is-hidden">
    <div class="ms-Callout-main">
      <div class="ms-Callout-header">
        <p class="ms-Callout-title">All of your favorite people</p>
      </div>
      <div class="ms-Callout-inner">
        <div class="ms-Callout-content">
          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
        </div>
        <div class="ms-Callout-actions">
          <div class="ms-CommandButton ms-CommandButton--inline">
            <button class="ms-CommandButton-button">
              <span class="ms-CommandButton-icon ms-fontColor-green"><i class="ms-Icon ms-Icon--CheckMark"></i></span> 
              <span class="ms-CommandButton-label">Command</span> 
            </button>
          </div>
          <div class="ms-CommandButton ms-CommandButton--inline">
            <button class="ms-CommandButton-button">
              <span class="ms-CommandButton-icon ms-fontColor-red"><i class="ms-Icon ms-Icon--Clear"></i></span> 
              <span class="ms-CommandButton-label">Command</span> 
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CalloutExample-button">
    <button class="ms-Button">
      <span class="ms-Button-label">Open Callout Action Text</span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
  for (var i = 0; i < CalloutExamples.length; i++) {
    var Example = CalloutExamples[i];
    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
    var CalloutElement = Example.querySelector(".ms-Callout");
    new fabric['Callout'](
      CalloutElement,
      ExampleButtonElement,
      "right"
    );
  }
</script>
OOBE (Out of the Box Experience) 
<div class="ms-CalloutExample">
  <div class="ms-Callout ms-Callout--arrowLeft  ms-Callout--OOBE is-hidden">
    <div class="ms-Callout-main">
      <div class="ms-Callout-header">
        <p class="ms-Callout-title">All of your favorite people</p>
      </div>
      <div class="ms-Callout-inner">
        <div class="ms-Callout-content">
          <p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
        </div>
        <div class="ms-Callout-actions">
          <button class="ms-Button ms-Button--primary">
            <span class="ms-Button-label">More</span> 
          </button>
          <button class="ms-Button">
            <span class="ms-Button-label">Got it</span> 
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CalloutExample-button">
    <button class="ms-Button">
      <span class="ms-Button-label">Open Callout OOBE</span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
  for (var i = 0; i < CalloutExamples.length; i++) {
    var Example = CalloutExamples[i];
    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
    var CalloutElement = Example.querySelector(".ms-Callout");
    new fabric['Callout'](
      CalloutElement,
      ExampleButtonElement,
      "right"
    );
  }
</script>
Peek Callout 
<div class="ms-CalloutExample">
  <div class="ms-Callout ms-Callout--arrowLeft  ms-Callout--peek is-hidden">
    <div class="ms-Callout-main">
      <div class="ms-Callout-header">
        <p class="ms-Callout-title">Uploaded 2 items to <span class='ms-Link'>Alton's OneDrive</span> </p>
      </div>
      <div class="ms-Callout-inner">
        <div class="ms-Callout-content">
          <p class="ms-Callout-subText"></p>
        </div>
        <div class="ms-Callout-actions">
          <button class="ms-Button">
            <span class="ms-Button-label">Got it</span> 
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-CalloutExample-button">
    <button class="ms-Button">
      <span class="ms-Button-label">Open Callout Peek</span> 
    </button>
  </div>
</div>
<script type="text/javascript">
  var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
  for (var i = 0; i < CalloutExamples.length; i++) {
    var Example = CalloutExamples[i];
    var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
    var CalloutElement = Example.querySelector(".ms-Callout");
    new fabric['Callout'](
      CalloutElement,
      ExampleButtonElement,
      "right"
    );
  }
</script>