21st rounds of Bootstrap3.0 Learning (JavaScript Plugin-tooltip)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the JavaScript plug-in-tool prompts.

JQuery developed by Jason Frame. inspired by the tipsy plug-in, Bootstrap prompts the plug-in to do better, and this plug-in does not rely on images. It only uses CSS3 to achieve animation effects and uses the data attribute to store titles.

Hover the mouse over buttons, text boxes, links, and other basic controls to see the prompt. First, the previous

 

The ToolTip of buttons is implemented, and the ToolTip of the text box and link is followed.

Tooltip dsafsdfasdfasdfasd

Add the data-toggle = "tooltip" attribute on the button to enable the tooltip function, and specify the location where the data-placement = "left" tooltip is displayed, it can be top, bottom, left, right ).

Optional features

For performance considerations, the data attribute api of The tooltip and the pop-up component is selectively added, that isYou must initialize them yourself.

Therefore, for the above six controls, we need to initialize them through the jQuery initialization event.

  <script type="text/javascript">'.tooltip-demo'"[data-toggle=tooltip]""body""#testt"'a'</script>

The initialization of buttons, text boxes, and links is slightly different.

. Btn-groupOr.input-groupYou must specifycontainer: 'body'Option to avoid unwanted side effects (for example, when a tooltip is displayed, the page element to work with may become wider or rounded ).

 

When you use a tooltip on a page element that is not allowed, you need to add an additional element to wrap it.

TodisabledOr.disabledAdd a tooltip element to wrap the page element that requires a tooltip in one<div>And then<div>Element application tooltip.

Usage

Prompt via JavaScript activation tool: the above has also been used

$('#example').tooltip(options)

Option

Prompt a single tool to use the data attribute

You can use the data attribute to specify additional options for a single tool prompt, as shown below.

Mark

Hover over me

Method $ (). tooltip (options) -- apply the tooltip for a group of elements .. Tooltip ('show') -- displays the tooltip.

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

. Tooltip ('hide ') -- hide the tooltip.

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

. Tooltip ('toggle ') -- displays or hides the tooltip.

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

. Tooltip ('deststroy') -- hide and destroy the tooltip.

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

Event

    $('.tooltip-demo').on('hidden.bs.tooltip', 1

The most important thing about the tooltip function is to remember that it must be enabled by using the JavaScript function. At first, I didn't know what the problem was, but it was hard to work out, and I was so depressed for a long time, find out the cause.

This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html