Tooltip

Basic

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. 

<p id="tooltip-text-example">
  Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title data-original-title="Default tooltip">you probably</a>
  haven't heard of them. Photo booth beard raw denim letterpress
  vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie
  sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
  terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
  thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse
  vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>,
  scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a>
  freegan cred raw denim single-origin coffee viral.
</p>
    Copy

Position

      
<button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
&nbsp;
<button type="button" class="btn" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
&nbsp;
<button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
&nbsp;
<button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
    Copy

Colors

Change a tooltip color using the data-state attribute.

        
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-state="primary" data-placement="top" title="Tooltip on top">
  Primary Tooltip
</button>
&nbsp;
<button type="button" class="btn btn-success" data-toggle="tooltip" data-state="success" data-placement="left" title="Tooltip on left">
  Success Tooltip
</button>
&nbsp;
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-state="danger" data-placement="top" title="Tooltip on top">
  Danger Tooltip
</button>
&nbsp;
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-state="warning" data-placement="bottom" title="Tooltip on bottom">
  Warning Tooltip
</button>
&nbsp;
<button type="button" class="btn btn-info" data-toggle="tooltip" data-state="info" data-placement="right" title="Tooltip on right">
  Info Tooltip
</button>
    Copy
See the usage documentation at http://getbootstrap.com/javascript/#tooltips

Initializing

You can initialize all tooltips on a page by their data-toggle attribute: 

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

Usage

require(['jquery', 'px/extensions/tooltip'], function($) {
  ...
});
See the documentation at https://angular-ui.github.io/bootstrap

Usage

To use tooltips, you need to include ui-bootstrap.js script:

<script src="path/to/js/ui-bootstrap.js"></script>

Example

      
<div ng-app="ngTooltipsApp">
  <button type="button" class="btn" uib-tooltip="Tooltip on top" tooltip-placement="top">
    Default
  </button>&nbsp;&nbsp;
  <button type="button" class="btn btn-primary" uib-tooltip="Tooltip on bottom" tooltip-placement="bottom" tooltip-class="tooltip-primary">
    Primary
  </button>&nbsp;&nbsp;
  <button type="button" class="btn btn-success" uib-tooltip="Tooltip on left" tooltip-placement="left" tooltip-class="tooltip-success">
    Success
  </button>
</div>

<script>
  angular.module('ngTooltipsApp', [ 'ui.bootstrap' ]);
</script>
    Copy
SETTINGS
THEMES