Biznex

Elements

These modular elements can be readily used and customized across pages and in different blocks.

tooltips static example <> show code


	<button type="button" class="btn btn-secondary dark-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
	  Tooltip on top
	</button>

how to use

Tooltips rely on the 3rd party library Tether for positioning. You must include tether.min.js before bootstrap.js in order for Tooltips to work!
Tooltips are opt-in for performance reasons, so you must initialize them yourself.

To initialize tooltip you need to write the following code in your main js file


	$(function () {
	  $('[data-toggle="tooltip"]').tooltip()
	})

You have to customize style using the classes generated by the plugin markup. Here is the generated markup


	<!-- Generated markup by the plugin -->
	<div class="tooltip tooltip-top" role="tooltip">
	  <div class="tooltip-arrow"></div>
	  <div class="tooltip-inner">
		Some tooltip text!
	  </div>
	</div><!-- Markup ends-->

Example

Clickable Tooltip <> show code


	<button type="button" class="btn btn-secondary dark-tooltip" data-toggle="tooltip" data-trigger="click" data-placement="top" title="Clickable Tooltip">
		  Clickable Tooltip
	</button>

How to use

By default Tooltips are triggered when the link element is hovered but you can alter this behaviour by adding a data-trigger="click|hover|focus" attribute.

Example