Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Popover Plugin Bootstrap Tabs Plugin

Bootstrap Tooltip (Tooltip) Plugin

The tooltip is very useful when you want to describe a link. The Tooltip plugin is inspired by Jason Frame written by jQuery.tipsy for inspiration. The Tooltip plugin has made many improvements, such as replacing image dependencies with CSS for animation effects and using data attributes to store title information.

if you want to use the functionality of this plugin separately, you need to refer to tooltip.js. Or, as Bootstrap Plugin Overview As mentioned in the chapter, you can refer to bootstrap.js or the compressed version of bootstrap.min.js.

Usage

The Tooltip plugin generates content and markers based on requirements, and by default, it places the tooltip after the triggering element. You can add tooltips in the following two ways:

via the data attribute: To add a tooltip, simply add data-toggle="tooltip" That's it. The title of the anchor is the text of the tooltip. By default, the plugin sets the tooltip at the top.
```
This is-toggle="tooltip" title="Example tooltip">Hover over me</a>
```
Through JavaScript: Trigger the tooltip with JavaScript:
```
$('#identifier').tooltip(options)
```

The Tooltip (Tooltip) plugin is not a pure CSS plugin like the dropdown menu and other plugins discussed earlier. To use this plugin, you must activate it with jQuery (read JavaScript). Use the following script to enable all tooltips on the page:

$(function　()　{　$("[data-button>

Online Example

The following examples demonstrate how to use the Tooltip (Tooltip) plugin through the data attribute.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Tooltip (Tooltip) Plugin</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Tooltip Plugin</h　-　anchor</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" title="Default Tooltip">Default Tooltip</a>.
This is a <a href="#" class="tooltip-test" data-toggle" data-placement="left" title="Left Tooltip">Left Tooltip</a>.
This is a <a href="#" data-toggle" data-placement="top" title="Top Tooltip">Top Tooltip</a>.
This is a <a href="#" data-toggle" data-placement="bottom" title="Bottom Tooltip">Bottom Tooltip</a>.
This is a <a href="#" data-toggle" data-placement="right" title="Right Tooltip">Right Tooltip</a>
<br>
<h4>Tooltip Plugin</h　-　Button</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Default Tooltip">Default Tooltip</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="left" title="Left Tooltip">Left Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="top" title="Top Tooltip">Top Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="bottom" title="Bottom Tooltip">Bottom Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="right" title="Right Tooltip">Right Tooltip</button>
<script>
	$(function　()　{　$("[data-button>
</script>
</body>
</html>

Test it out ‹/›

The results are as follows:

$(function　()　{　$("[data

toggle='tooltip']").tooltip();　});

Options	Some options are added through the Bootstrap data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:/Option name	Type	Description
Data attribute name	animation Default value	data-Data attribute name	Default value: true
The tooltip uses CSS gradient filter effects.	animation Default value: false	data-The tooltip uses CSS gradient filter effects.	boolean
string\|function	html Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the dom. If you are concerned about XSS attacks, please use text.	data-string\|function	Default value: top placement Specify how to position the tooltip (i.e., top\|bottom\|left\|right\|auto). auto
selector	string Default value: false	data-selector	If a selector is provided, the tooltip object will be delegated to the specified target. When this happens, the tooltip will be dynamically adjusted. For example, if placement is "auto left", the tooltip will be displayed on the left as much as possible, and it will only display on the right if the situation does not allow it.
title	string \| function Default value: ''	data-title	If not specified title If the attribute is not specified, the title option is the default title value.
trigger	string Default value: 'hover focus'	data-trigger	Define how to trigger the tooltip: click\| hover \| focus \| manual．You can pass multiple triggers, separated by spaces.
delay	number \| object Default value: 0	data-delay	Milliseconds to delay the display and hide of the tooltip - Not applicable to manual trigger type. If a number is provided, the delay will be applied to both display and hide. If an object is provided, the structure is as follows: delay: {　show:　500,　hide:　100　}
container	string \| false Default value: false	data-container	Append a tooltip to the specified element. Example: container: 'body'

Method

Below are some useful methods in the tooltip (Tooltip) plugin:

Method	Description	Example
Options: .tooltip(options)	Attach a tooltip handle to the element collection.	$().tooltip(options)
$().tooltip(options) Toggle:	.tooltip('toggle')/.tooltip('hide')	Toggle the display
$('#element').tooltip('toggle') Show:	.tooltip('show')	Show the tooltip of the element.
$('#element').tooltip('show') Hide:	.tooltip('hide')	Hide the tooltip of the element.
$('#element').tooltip('hide') Destroy:	.tooltip('destroy')	Hide and destroy the tooltip of the element.

Online Example

$('#element').tooltip('destroy')

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　The following examples demonstrate the usage of the Tooltip (Tooltip) plugin methods./title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Tooltip (Tooltip) Plugin Method　10<div style="padding:　10<div style="padding:　100px
	options">　
	placement="top" title="destroy">Tooltip Method destroy<-show" data-px;">/a>.
	options">　
	placement="top" title="destroy">Tooltip Method destroy<-toggle="tooltip" title="show">Tooltip Method show<-toggle" data-hide" data/a>.
	options">　
	placement="top" title="destroy">Tooltip Method destroy<-placement="left" title="hide">Tooltip Method hide<-toggle" data-destroy" data/a>.
	options">　
	placement="top" title="destroy">Tooltip Method destroy<-<a href="#" class="tooltip-toggle" data-toggle="tooltip" data/a>.
	placement="bottom" title="toggle">Tooltip Method toggle<
	<br><br><br><br><br><br>-<p class="tooltip
		options">　
		This is-<a href="#" data2toggle="tooltip" title="<h2　</h2'am Header/a>.
	</>">Tooltip Method Options<
	<script>
		$('function () { $('.tooltip}}-show').tooltip('show');});
		$('function () { $('.tooltip}}-p>
		$('function () { $('.tooltip}}-hide().tooltip('hide');});
		$('function () { $('.tooltip}}-destroy().tooltip('destroy');});
		$(function () { $(".tooltip toggle").tooltip('toggle');});-$().tooltip({html: true});});
	</script>
</div>
</body>
</html>

Test it out ‹/›

The results are as follows:

Event

The following table lists the events used in the Tooltip plugin. These events can be used as hooks in the function.

Event	Description	Example
show.bs.tooltip	This event is triggered immediately when the show example method is called.	$('#myTooltip').on('show.bs.tooltip', function () { 　　//　Perform some actions... }
shown.bs.tooltip	This event is triggered when the tooltip is visible to the user (the CSS transition effect will be awaited).	$('#myTooltip').on('shown.bs.tooltip', function () { 　　//　Perform some actions... }
hide.bs.tooltip	This event is triggered immediately when the hide example method is called.	$('#myTooltip').on('hide.bs.tooltip', function () { 　　//　Perform some actions... }
hidden.bs.tooltip	This event is triggered when the tooltip is hidden from the user (the CSS transition effect will be awaited).	$('#myTooltip').on('hidden.bs.tooltip', function () { 　　//　Perform some actions... }

Online Example

The following example demonstrates the usage of the Tooltip plugin event.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Tooltip Plugin Events</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Tooltip Plugin</h　-　anchor</h4>
This is a <a href="#" class="tooltip-show" data-toggle="tooltip"　
	title="Default Tooltip" Default Tooltip
</a>.
<script>
$('function () { $('.tooltip}}-show').tooltip('show');});
$('function () { $('.tooltip}}-$('.tooltip').on('show.bs.tooltip', function () {
	alert("Alert message on show");
})});
</script>
</body>
</html>

Test it out ‹/›

The results are as follows:

Bootstrap Popover Plugin Bootstrap Tabs Plugin

Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Tooltip (Tooltip) Plugin

Usage

Online Example

Online Example

$(function () { $("[data

Method

Online Example

Online Example

Event

Online Example

Online Example

$(function　()　{　$("[data