Home > Developer > Web Develop
The tooltip and PopOver are lightweight, extensible instructions for prompting. For mobile, these two instructions work, but are not recommended from a user experience perspective.
First of all, there are three ways to use Tooltip,tooltip:
(1) Uib-tooltip defines the text of the hint
(2) uib-tooltip-html the HTML string that defines the hint, which is not compiled into HTML content (which needs to be compiled into HTML content using $sce.trustashtml). Need to be aware of content security to prevent scripting attacks
(3) uib-tooltip-template defines the HTML content of the hint, which needs to be placed in a span or div tag
The code is:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <Linkhref= "/content/bootstrap.css"rel= "stylesheet" />6 <title></title>7 8 <Scriptsrc= "/scripts/angular.js"></Script>9 <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script>Ten <Script> One A Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Tooltipdemoctrl', function($scope, $sce) { - $scope. Htmltooltip=$sce. trustashtml ('code Samples <code>id:5</code>'); - the $scope. Text= "some text"; - }); - </Script> - <Scripttype= "Text/ng-template"ID= "mytooltiptemplate.html"> + <Div>use the template's prompt box<Strong>Markup</strong>{{Text}}</Div> - </Script> + </Head> A <Bodystyle= "padding:30px"> at <DivNg-controller= "Tooltipdemoctrl"> - <Divclass= "Form-group"><Buttontooltip-placement= "Right"Uib-tooltip= "Text Prompt box"type= "button"class= "Btn Btn-default">Button</Button></Div> - <Divclass= "Form-group"><ahref="#"uib-tooltip-html= "Htmltooltip">Use the HTML prompt box</a></Div> - <Divclass= "Form-group"><inputtype= "text"uib-tooltip-template= "' mytooltiptemplate.html '"value= "template hint box"/></Div> - </Div> - </Body> in </HTML>View Code
The effects were:
The above 3 types of ToolTip can be used in the following properties:
| Property name | Default value | Note |
| Tooltip-animation | True | Whether to use animations when showing and hiding |
| Tooltip-append-to-body | False | Whether to place the cue box at the end of body |
| Tooltip-class | The custom class name added to the ToolTip | |
| Tooltip-enable | True | is enabled |
| Tooltip-is-open | False | Whether to display a prompt box |
| Tooltip-placement | Top | The location of the prompt box. The values that can be set include: Top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top, Right-bottom |
| Tooltip-popup-close-delay | 0 | Delay time before closing the cue box |
| Tooltip-popup-delay | 0 | Delay time before displaying the prompt box |
| Tooltip-trigger | MouseEnter | To display a trigger event for a prompt box |
Add "Auto" to the position indicated by tooltip-placement, such as the "Auto top" cue box, which is positioned in its most recent scrollable parent element.
The events supported by the Tooltip-trigger display and Hide prompt boxes are:
Mouseenter:mouseleave
Click:click
Outsideclick:outsideclick
Focus:blur
None
You only need to set the event that displays the cue box when you use it (the event that hides the Cue box is automatically set).
When set to click, a prompt is displayed once on the element, and then the Hide prompt box is clicked once.
When set to Outsideclick, a prompt box appears on the element once, and clicking once outside of the element hides the prompt.
When set to None, you can use it with the Tooltip-is-open property to control when the cue box is displayed and hidden.
The ToolTip also supports global configuration, using $uibtooltipprovider.options to configure the default settings for the ToolTip, such as whether to enable animation, display location, delay time, and so on. Use $tooltipprovider.settriggers to extend the trigger events that are displayed and hidden by the cue box.
As follows:
Angular.module (' Ui.bootstrap.demo ', [' ui.bootstrap ']) . config ([' $uibTooltipProvider ', function ( Uibtooltipprovider) { uibtooltipprovider.options ({ animation:false, appendtobody:false, Placement: ' Right ', popupclosedelay:0, popupdelay:0, });
Uibtooltipprovider.settriggers ({' Opentrigger ': ' Closetrigger '} }]). Controller (' Tooltipdemoctrl ', function ($scope) { });The above is the content of the ToolTip, and then the implementation of Popover,popover is dependent on the ToolTip module, so these two instructions are very similar in use and configuration.
PopOver also have three ways to use, respectively, is uib-popover,uib-popover-template and uib-popover-html, meaning and use the same method as the ToolTip is the same, here is not repeated said.
The properties of the PopOver are:
| Property name | Default value | Note |
| Popover-animation | True | Whether to use animations when showing and hiding |
| Popover-append-to-body | False | Whether to place the cue box at the end of body |
| Popover-enable | True | is enabled |
| Popover-is-open | False | Whether to display a prompt box |
| Popover-placement | Top | The location of the prompt box. The values that can be set include: Top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top, Right-bottom |
| Popover-popup-close-delay | 0 | Delay time before closing the cue box |
| Popover-popup-delay | 0 | Delay time before displaying the prompt box |
| Popover-trigger | MouseEnter | To display a trigger event for a prompt box |
| Popover-title | Title |
Most of the properties and the ToolTip are the same, but there is no popover-class, but also a lot of popover-title.
One thing to note is that the global configuration of PopOver is configured with $uibtooltipprovider, just like the ToolTip.
Angularjs UI Components Ui-bootstrap Share (eight)--tooltip and PopOver
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
