invisi/ui-bootstrap4
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

docs(tooltip): tune up

Browse Source 
Closes #5143
This commit is contained in:
Foxandxss
2016-01-04 13:41:00 +01:00
parent 6b5fcc385c
commit c357385207
3 changed files with 96 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tooltip/docs/demo.html
+19 -16
View File
@@ -1,5 +1,4 @@
<div ng-controller="TooltipDemoCtrl">
<h4>Positional</h4>
<div class="form-group">
<label>Tooltip placement</label>
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
@@ -49,23 +48,27 @@
I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
</p>
<form role="form">
<div class="form-group">
<label>Or use custom triggers, like focus: </label>
<input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
</div>
<div class="form-group" ng-class="{'has-error' : !inputModel}">
<label>Disable tooltips conditionally:</label>
<input type="text" ng-model="inputModel" class="form-control"
placeholder="Hover over this for a tooltip until this is filled"
uib-tooltip="Enter something in this input field to disable this tooltip"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
</div>
</form>
<div class="form-group">
<label>Or use custom triggers, like focus: </label>
<input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
</div>
<div class="form-group" ng-class="{'has-error' : !inputModel}">
<label>Disable tooltips conditionally:</label>
<input type="text" ng-model="inputModel" class="form-control"
placeholder="Hover over this for a tooltip until this is filled"
uib-tooltip="Enter something in this input field to disable this tooltip"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-enable="!inputModel" />
</div>
<div class="form-group">
<label>
Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
</label>
<button ng-click="tooltipIsOpen = !tooltipIsOpen">Toggle tooltip</button>
</div>
<script type="text/ng-template" id="myTooltipTemplate.html">
<span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
</script>
src/tooltip/docs/readme.md
+74 -58
View File
@@ -4,60 +4,84 @@ directive supports multiple placements, optional transition animation, and more.
There are three versions of the tooltip: `uib-tooltip`, `uib-tooltip-template`, and
`uib-tooltip-html-unsafe`:
- `uib-tooltip` takes text only and will escape any HTML provided.
- `uib-tooltip-template` takes text that specifies the location of a template to
use for the tooltip. Note that this needs to be wrapped in a tag.
- `uib-tooltip-html` takes
whatever HTML is provided and displays it in a tooltip; *The user is responsible for ensuring the
content is safe to put into the DOM!*
* `uib-tooltip` -
Takes text only and will escape any HTML provided.
* `uib-tooltip-template` -
Takes text that specifies the location of a template to use for the tooltip. Note that this needs to be wrapped in a tag.
* `uib-tooltip-html` -
Takes whatever HTML is provided and displays it in a tooltip; *The user is responsible for ensuring the content is safe to put into the DOM!*
The tooltip directives provide several optional attributes to control how they
will display:
### uib-tooltip-* settings
- `tooltip-placement`: Where to place it? Defaults to "top". Passing in 'auto' seperated by a space before the placement will
enable auto positioning, e.g: "auto bottom-left". The tooltip will attempt to position where it fits in
the closest scrollable ancestor. Accepts:
All these settings are available for the three types of tooltips.
- "top" - tooltip on top, horizontally centered on host element.
- "top-left" - tooltip on top, left edge aligned with host element left edge.
- "top-right" - tooltip on top, right edge aligned with host element right edge.
- "bottom" - tooltip on bottom, horizontally centered on host element.
- "bottom-left" - tooltip on bottom, left edge aligned with host element left edge.
- "bottom-right" - tooltip on bottom, right edge aligned with host element right edge.
- "left" - tooltip on left, vertically centered on host element.
- "left-top" - tooltip on left, top edge aligned with host element top edge.
- "left-bottom" - tooltip on left, bottom edge aligned with host element bottom edge.
- "right" - tooltip on right, vertically centered on host element.
- "right-top" - tooltip on right, top edge aligned with host element top edge.
- "right-bottom" - tooltip on right, bottom edge aligned with host element bottom edge.
- `tooltip-animation`: Should it fade in and out? Defaults to "true".
- `tooltip-popup-delay`: For how long should the user have to have the mouse
over the element before the tooltip shows (in milliseconds)? Defaults to 0.
- `tooltip-popup-close-delay`: For how long should the tooltip remain open
after the close trigger event? Defaults to 0.
- `tooltip-trigger`: What should trigger a show of the tooltip? Supports a space separated list of event names.
Note: this attribute is no longer observable. See `tooltip-enable`.
- `tooltip-enable`: Is it enabled? It will enable or disable the configured
`tooltip-trigger`.
- `tooltip-append-to-body`_(Default: false)_: Should the tooltip be appended to `$body` instead of
the parent element?
- `tooltip-class`: Custom class to be applied to the tooltip.
- `tooltip-is-open` <i class="glyphicon glyphicon-eye-open"></i>
_(Default: false)_:
* `tooltip-animation`
<small class="badge">$</small>
<small class="badge">C</small>
_(Default: `true`, Config: `animation`)_ -
Should it fade in and out?
* `tooltip-append-to-body`
<small class="badge">$</small>
_(Default: `false`)_ -
Should the tooltip be appended to '$body' instead of the parent element?
* `tooltip-class` -
Custom class to be applied to the tooltip.
* `tooltip-enable`
<small class="badge">$</small>
_(Default: `true`)_ -
Is it enabled? It will enable or disable the configured tooltip-trigger.
* `tooltip-is-open`
<i class="glyphicon glyphicon-eye-open"></i>
_(Default: `false`)_ -
Whether to show the tooltip.
The tooltip directives require the `$position` service.
* `tooltip-placement`
<small class="badge">C</small>
_(Default: `top`, Config: `placement`)_ -
Passing in 'auto' seperated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The tooltip will attempt to position where it fits in the closest scrollable ancestor. Accepts:
* `top` - tooltip on top, horizontally centered on host element.
* `top-left` - tooltip on top, left edge aligned with host element left edge.
* `top-right` - tooltip on top, right edge aligned with host element right edge.
* `bottom` - tooltip on bottom, horizontally centered on host element.
* `bottom-left` - tooltip on bottom, left edge aligned with host element left edge.
* `bottom-right` - tooltip on bottom, right edge aligned with host element right edge.
* `left` - tooltip on left, vertically centered on host element.
* `left-top` - tooltip on left, top edge aligned with host element top edge.
* `left-bottom` - tooltip on left, bottom edge aligned with host element bottom edge.
* `right` - tooltip on right, vertically centered on host element.
* `right-top` - tooltip on right, top edge aligned with host element top edge.
* `right-bottom` - tooltip on right, bottom edge aligned with host element bottom edge.
* `tooltip-popup-close-delay`
<small class="badge">C</small>
_(Default: `0`, Config: `popupCloseDelay`)_ -
For how long should the tooltip remain open after the close trigger event?
**Triggers**
* `tooltip-popup-delay`
<small class="badge">C</small>
_(Default: `0`, Config: `popupDelay`)_ -
Popup delay in milliseconds until it opens.
* `tooltip-trigger`
_(Default: `mouseenter`)_ -
What should trigger a show of the tooltip? Supports a space separated list of event names (see below).
The following show triggers are supported out of the box, along with their
provided hide triggers:
**Note:** To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).
### Triggers
The following show triggers are supported out of the box, along with their provided hide triggers:
- `mouseenter`: `mouseleave`
- `click`: `click`
- `outsideClick`: `outsideClick`
- `focus`: `blur`
- `none`: ``
- `none`
The `outsideClick` trigger will cause the tooltip to toggle on click, and hide when anything else is clicked.
@@ -65,28 +89,20 @@ For any non-supported value, the trigger will be used to both show and hide the
tooltip. Using the 'none' trigger will disable the internal trigger(s), one can
then use the `tooltip-is-open` attribute exclusively to show and hide the tooltip.
**$uibTooltipProvider**
### $uibTooltipProvider
Through the `$uibTooltipProvider`, you can change the way tooltips and popovers
behave by default; the attributes above always take precedence. The following
methods are available:
- `setTriggers(obj)`: Extends the default trigger mappings mentioned above
with mappings of your own. E.g. `{ 'openTrigger': 'closeTrigger' }`.
- `options(obj)`: Provide a set of defaults for certain tooltip and popover
attributes. Currently supports 'placement', 'placementClassPrefix', 'animation', 'popupDelay', and
`appendToBody`. Here are the defaults:
* `setTriggers(obj)`
_(Example: `{ 'openTrigger': 'closeTrigger' }`)_ -
Extends the default trigger mappings mentioned above with mappings of your own.
* `options(obj)` -
Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the <small class="badge">C</small> badge.
<pre>
placement: 'top',
placementClassPrefix: '',
animation: true,
popupDelay: 0,
popupCloseDelay: 500,
appendToBody: false
</pre>
**Known issues**
### Known issues
For Safari 7+ support, if you want to use the **focus** `tooltip-trigger`, you need to use an anchor tag with a tab index. For example:
src/tooltip/tooltip.js
+3 -3
View File
@@ -55,7 +55,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
};
/**
* This is a helper function for translating camel-case to snake-case.
* This is a helper function for translating camel-case to snake_case.
*/
function snake_case(name) {
var regexp = /[A-Z]/g;
@@ -348,9 +348,9 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
}
/**
* Set the inital scope values. Once
* Set the initial scope values. Once
* the tooltip is created, the observers
* will be added to keep things in synch.
* will be added to keep things in sync.
*/
function prepareTooltip() {
ttScope.title = attrs[prefix + 'Title'];