BOOTSTRAP TOOLTIP PLUGIN

Size: px

Start display at page:

Download "BOOTSTRAP TOOLTIP PLUGIN"

Moses White
5 years ago
Views:

1 BOOTSTRAP TOOLTIP PLUGIN Copyright tutorialspoint.com Tooltips are useful when you need to describe a link. The plugin was inspired by jquery.tipsy plugin written by Jason Frame. Tooltips have since been updated to work without images, animate with a CSS animation, and data-attributes for local title storage. If you want to include this plugin functionality individually, then you will need tooltip.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. Usage The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. You can add tooltips in the following two ways: Via data attributes : To add a tooltip, add data-toggle="tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin. <a href="#" data-toggle="tooltip" title=" tooltip">hover over me</a> Via JavaScript : Trigger the tooltip via JavaScript: $('#identifier').tooltip(options) Tooltip plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this plugin you MUST activate it using jquery readjavascript. To enable all the tooltips on your page just use this script: $( $("[data-toggle='tooltip']").tooltip(); ; <h4>tooltip examples for anchors</h4> title="tooltip on left"> Default Tooltip data-placement="left" title="tooltip on left"> Tooltip on Left data-toggle="tooltip" data-placement="top" title="tooltip on top"> Tooltip on Top data-toggle="tooltip" data-placement="bottom" title="tooltip on bottom"> Tooltip on Bottom data-toggle="tooltip" data-placement="right" title="tooltip on right"> Tooltip on Right </a> <br>

2 <h4>tooltip examples for buttons</h4> title="tooltip on left"> Default Tooltip data-placement="left" title="tooltip on left"> Tooltip on left data-placement="top" title="tooltip on top"> Tooltip on top data-placement="bottom" title="tooltip on bottom"> Tooltip on bottom data-placement="right" title="tooltip on right"> Tooltip on right $( $("[data-toggle='tooltip']").tooltip(); ; Options There are certain options which can be added via the Bootstrap Data API or invoked via JavaScript. Following table lists the options: Option Name Type/Default Value Data attribute name Description animation boolean Default: true dataanimation Applies a CSS fade transition to the tooltip. html boolean data-html Inserts HTML into the tooltip. If false, jquery s text method will be used to insert content into the dom. Use text if you re worried about XSS attacks. placement string function Default: top dataplacement Specifies how to position the tooltip i. e., top bottom left right auto. When auto is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. selector string dataselector If a selector is provided, tooltip objects will be delegated to the specified targets.

3 title string function Default: " data-title The title option is the default title value if the title attribute isn t present. trigger string Default: 'hover focus' datatrigger Defines how the tooltip is triggered: click hover focus manual. You may pass multiple triggers; separate them with a space. content string function Default: '' datacontent Default content value if data-content attribute isn't present delay number object Default: 0 data-delay Delays showing and hiding the tooltip in ms does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { show: 500, hide: 100 } container string false datacontainer Appends the tooltip to a specific element. : container: 'body' Methods The following are some useful methods for tooltips: Method Description Options :.tooltip options Attaches a tooltip handler to an element collection. $().tooltip(options) Toggle :.tooltip Toggles an element's tooltip. $('#element').tooltip('toggle') toggle Show :.tooltip Reveals an element's tooltip. $('#element').tooltip('show') show Hide :.tooltip Hides an element's tooltip. $('#element').tooltip('hide') hide Destroy :.tooltip Hides and destroys an element's destroy tooltip. $('#element').tooltip('destroy') <div style="padding: 100px 100px 10px;"> title="show">tooltip on method show

4 data-placement="left" title="hide">tooltip on method hide data-placement="top" title="destroy">tooltip on method destroy data-placement="bottom" title="toggle">tooltip on method toggle <br><br><br><br><br><br> <p > data-toggle="tooltip" title="<h2>'am Header2 </h2>">tooltip on method options </p> $( $('.tooltip-show').tooltip('show');; $( $('.tooltip-hide').tooltip('hide');; $( $('.tooltip-destroy').tooltip('destroy');; $( $('.tooltip-toggle').tooltip('toggle');; $( $(".tooltip-options a").tooltip({html : true ; ; <div> Events Following table lists the events to work with tooltip plugin. This event may be used to hook into the function. Event Description show.bs.tooltip This event fires immediately when the show instance method is called. $('#mytooltip').on('show.bs.tooltip', shown.bs.tooltip This event is fired when the tooltip has been made visible to the user willwaitforcsstransitionstocomplete.. $('#mytooltip').on('shown.bs.tooltip', hide.bs.tooltip This event is fired immediately when the hide instance method has been called. $('#mytooltip').on('hide.bs.tooltip', hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user $('#mytooltip').on('hidden.bs.tooltip',

5 hidden from the user willwaitforcsstransitionstocomplete. <h4>tooltip examples for anchors</h4> title="default Tooltip">Default Tooltip $( $('.tooltip-show').tooltip('show');; $( $('.tooltip-show').on('show.bs.tooltip', alert("alert message on show"); ; Loading [MathJax]/jax/output/HTML-CSS/jax.js

BOOTSTRAP TAB PLUGIN

BOOTSTRAP TAB PLUGIN http://www.tutorialspoint.com/bootstrap/bootstrap_tab_plugin.htm Copyright tutorialspoint.com Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few