Simple application of Css&&bootstrap:tooltips

1.
For a common element, first add a Atip class to the classes and add the corresponding values
Data-toggle immutable data-placement can be set toTop | bottom | left | right | auto.title is not empty when the title is displayedotherwise display Data-original-title


2.of course, the most basic files are to be imported
and then write a JS script to do it.
trigger:how tooltip is Triggered-click | hover | focus | manual.Other properties reference corresponding API

name	type	default	description
animation	boolean	true	apply a CSS fade transition to the ToolTip
Container	string | False	False	appends The tooltip to a specific element. Example: container: ' Body ' . This option was particularly useful in the it allows you to position the tooltip in the flow of the document near the trig gering element- which would prevent the tooltip from floating away from the triggering element during a window resize .
Delay	number | Object	0	delay showing and hiding the ToolTip (MS)-does not apply to manual trigger type if A number is supplied, delay was applied to both hide/show object structure is: delay: {" Show ": $," hide ": [+]
Html	Boolean	False	Insert HTML into the ToolTip. If False, JQuery's method would be text used-insert content into the DOM. Use text if you ' re worried about XSS attacks.
Placement	string | function	' Top '	How to position the Tooltip-top | Bottom | Left | Right | Auto. When "Auto" is specified, it'll dynamically reorient the ToolTip. For example, if placement was "auto left", the ToolTip would display to the left when possible, otherwise it would display RI Ght. When a function was used to determine the placement, it was called with the ToolTip DOM node as its first argument and the T riggering element DOM node as its second. The this context is set to the ToolTip instance.
Selector	String	False	If A selector is provided, the ToolTip objects'll be delegated to the specified targets. In practice, the used to enable the dynamic HTML content to the ToolTips added. Seethisandan informative example.
Template	String	‘<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>‘	Base HTML to use when creating the ToolTip. The ToolTip ' s'll be title injected into the .tooltip-inner . .tooltip-arrowWould become the ToolTip ' s arrow. The outermost wrapper element should has the .tooltip class.
Title	string | function	‘‘	default title value If title  attribute isn ' t present. If A function is given, it'll be called with Its this  reference set to the element, the ToolTip is attached to.
trigger	string	' hover Focus '	how tooltip is Triggered-click | Hover | Focus | Manual. You may pass multiple triggers; Separate them with a space.
Viewport	string | Object	{selector: ' body ', padding:0}	keeps The tooltip within the bounds of this element. Example: viewport: ' #viewport '  or {" selector ":" #viewport "," padding ": 0}

Simple application of css&&bootstrap:tooltips