mgcrea.ngStrap.tooltip
Add small overlays of content on hover, to any element for housing secondary information.
$scope.tooltip = {{tooltip | json}};
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
To prevent databinding issues, "the rule of thumb is, if you use ng-model
there has to be a dot somewhere." Miško Hevery.
Append a bs-tooltip
attribute to any element to enable the directive.
$tooltip
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myTooltip = $tooltip(element, {title: 'My Title'});
Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-
, as in data-animation=""
.
For directives, you can naturally inherit the contextual $scope
or leverage a custom one with an AngularJS expression to evaluate as an object directly on the bs-tooltip
attribute
You can position your popover in corners (such as bottom-left
) or any other combination two. Requires some CSS to render properly.
Name | type | default | description |
---|---|---|---|
animation | string | animation-fade | apply a CSS animation powered by ngAnimate |
placement | string | 'right' | how to position the tooltip - top | bottom | left | right, or any combination like bottom-left. |
trigger | string | 'click' | how tooltip is triggered - click | hover | focus | manual |
title | string | '' | default title value if
title attribute isn't present |
delay | number | object | 0 |
delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is:
|
container | string | false | false |
Appends the tooltip to a specific element. Example:
|
template | path | false |
If provided, overrides the default template, can be either a remote URL or a cached template id. |
You can override global defaults for the plugin with $tooltipProvider.defaults
angular.module('myApp')
.config(function($tooltipProvider) {
angular.extend($tooltipProvider.defaults, {
animation: 'animation-flipX',
trigger: 'hover'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the tooltip.
Hides the tooltip.
Toggles the tooltip.