When you want to describe a link, using the Hint tool plugin is a good choice. The bootstrap Tip tool plug-in makes a lot of improvements, such as not needing to rely on images, but changing the CSS animation effect, using the Data property to store the header information.
Usage
The Hint tool (tooltip) plugin generates content and markup as required, and by default the ToolTip is placed behind their triggering element, and you can add the ToolTip in the following two ways.
1, through the Data property, if you need to add a hint tool, only need to add a data-toggle= "tooltip" to a chain tag. The anchor title is the text of the Cue tool (tooltip), which, by default, sets the Cue tool (tooltip) to the top.
<ahref="#"data-toggle="tooltip"title="Example tooltip" > please hover over me </a>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>bootstrap Experience Example: Hint tool (tooltip) plugin </title>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
<body>
<div style= "padding:20px" >
This is a <a href= "#" data-toggle= "tooltip" title= "default tooltip" class= "Tooltip-test" > Default tooltip</a>.
This is a <a href= "#" data-toggle= "tooltip" data-placement= "left" title= "right tooltip" class= "Tooltip-test" > The tooltip</a> of the left;
This is a <a href= "#" data-toggle= "tooltip" data-placement= "right" title= "R tootip" class= "Tooltip-test" > Tooltip</a> of the right;.
This is a <a href= "#" data-toggle= "tooltip" data-placement= "bottom" title= "at the bottom of the ToolTip" class= "Tooltip-test" > Bottom of the tooltip</a>.
This is a <a href= "#" data-toggle= "tooltip" data-placement= "Top" title= "tooltip" class= "Tooltip-test" > Top tooltip </a>.
<button type= "button" class= "btn Btn-default" data-toggle= "tooltip" title= "default tooltip" > Default Tooltip</button >
<button type= "button" class= "btn btn-success" data-toggle= "tooltip" data-placement= "left" title= "a tooltip for" > The tooltip</button> of the Left
<button type= "button" class= "btn btn-primary" data-toggle= "tooltip" data-placement= "right" title= "R Tootip" > The tootip</button> of the right
<button type= "button" class= "btn btn-warning" data-toggle= "tooltip" data-placement= "Bottom" title= "tooltip at Bottom" > Bottom of the tooltip</button>
<button type= "button" class= "btn btn-info" data-toggle= "tooltip" data-placement= "Top" title= "Top ToolTip" > Top of the Tooltip</button>
</div>
<script>
$ (document). Ready (function () {
$ ("[data-toggle= ' tooltip ']"). ToolTip ();
})
</script>
</body>
Bootstrap hint tool (tooltip) plugin
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
