Name Type Default Description
animation boolean true Apply a CSS fade transition to the tooltip
delay number | object 0

Delay showing and hiding the tooltip (ms)

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: {show: 500, hide: 100}

html boolean false Allow HTML in the tooltip.
placement string 'bottom'

How to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

title string ''

Default title value if title attribute isn't present.

trigger string 'hover focus' How tooltip is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space.
All option defaults are configurable in 'Tooltip' provider and can be changed via attributes.
Tooltip on left Tooltip on top Tooltip on bottom Tooltip on right
<bs-tooltip placement="left">Tooltip on left</bs-tooltip>
<bs-tooltip placement="top">Tooltip on top</bs-tooltip>
<bs-tooltip placement="bottom">Tooltip on bottom</bs-tooltip>
<bs-tooltip placement="right">Tooltip on right</bs-tooltip>

<span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="left">Title left</span>
<span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="right">Title right</span>
<span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="top">Title top</span>
<span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="bottom">Title bottom</span>

Tooltip will be adjusted to display within boundary element (red border)

Title auto

<div bs-tooltip-boundary>
	<span class="btn btn-secondary"
		bs-tooltip-toggle title="title"
		placement="auto">
		Title auto
	</span>
</div>
Title on click Remote trigger

<span class="btn btn-secondary" bs-tooltip-toggle="tooltip" title="{{title}}
						" html="true" trigger="click">Title on click</span>
<input type="text" ng-model="title"/>
<span class="btn btn-secondary" ng-click="tooltip=!tooltip">Remote trigger</span>


<button class="btn btn-secondary" title="Test">Hover me!</button>
-----
directive('title', ['bsTooltipFactory', function(bsTooltipFactory){
	return bsTooltipFactory.customBindingDirective();
}]);
Name Type Default Description
animation boolean true Apply a CSS fade transition to the popover
content string ''

Default content value if content attribute isn't present.

delay number | object 0

Delay showing and hiding the popover (ms)

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: {show: 500, hide: 100}

html boolean false Allow HTML in the popover title/content.
placement string 'right'

How to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

title string ''

Default title value if title attribute isn't present.

trigger string 'click' How popover is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space.
Popover top Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Popover right Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Popover bottom Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Popover left Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<bs-popover placement="top">
	<bs-popover-title>Popover top</bs-popover-title>
	<bs-popover-content>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
		lacinia quam venenatis vestibulum.
	</bs-popover-content>
</bs-popover>
Popover on left Popover on top Popover on bottom Popover on right

<span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">Popover on left</span>
<span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">Popover on top</span>
<span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">Popover on bottom</span>
<span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">Popover on right</span>

Popover will be adjusted to display within boundary element (red border)

Popover auto

<div bs-tooltip-boundary>
	<span class="btn btn-secondary" bs-tooltip
		title="title" placement="left auto">
		Popover auto
	</span>
</div>
Popover on focus Popover on hover Remote trigger

<span class="btn btn-secondary" bs-popover-toggle trigger="focus"...>
	Popover on focus
</span>
<span class="btn btn-secondary" bs-popover-toggle="popover" trigger="hover"...>
	Popover on hover
</span>
<span class="btn btn-secondary" ng-click="popover=!popover"...>
	Remote trigger
</span>
Collapse plugin requires ngAnimate to properly display collapse animations!

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<span class="btn btn-primary" ng-click="collapse=!collapse">Toggle collapse</span>
<div bs-collapse="collapse">
	<div class="well">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
		Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
	</div>
</div>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="panel-group" bs-collapse-group>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a role="button" ng-click="tab1=!tab1">
					Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse" bs-collapse="tab1">
			<div class="panel-body">...</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title" ng-init="tab2=true">
				<a class="collapsed" ng-click="tab2=!tab2">
					Collapsible Group Item #2
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse" bs-collapse="tab2">
			<div class="panel-body">...</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title" ng-init="tab3=true">
				<a class="collapsed" ng-click="tab3=!tab3">
					Collapsible Group Item #3
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse" bs-collapse="tab3">
			<div class="panel-body">...</div>
		</div>
	</div>
</div>
Bootstrap 11 mins ago Hello, world! This is a toast message.
<button type="button" class="btn btn-outline-primary mb-3" ng-click="$root.toast=true">
	Show toast
</button>
<bs-toast visible="$root.toast">
	<bs-toast-header>
		<strong class="mr-auto">Bootstrap</strong>
		<small>11 mins ago</small>
		<button type="button" class="ml-2 mb-1 close" ng-click="$root.toast=false">
			<span>×</span>
		</button>
	</bs-toast-header>
	<bs-toast-body>
		Hello, world! This is a toast message.
	</bs-toast-body>
</bs-toast>
Name Type Default Description
animation boolean true Apply a CSS fade transition to the toast
All option defaults are configurable in 'Toasts' provider and can be changed via attributes.