Bootstrap accessible tooltip: includes consideration for low dexterity

bootstrap-accessible-tooltips.js

/*
 * Dependencies:
 * - Bootstrap: https://getbootstrap.com/docs/4.0/components/tooltips/
 * - hoverIntent.js: https://github.com/tristen/hoverintent
 *
 * Demo: https://codepen.io/jasonday/pen/vRGXMv
 *
 */

$(document).ready(function() {
	// set bootstrap tooltip to manual
	$('[data-toggle="tooltip"]').tooltip({
		trigger: "manual"
	});

	// trigger tooltip with hoverIntent
	$('[data-toggle="tooltip"]').hoverIntent({
		over: function() {
			$(this).tooltip("show");
		},
		out: function() {}
	});

	// trigger tooltip on focus
	$('[data-toggle="tooltip"]').on("focus", function() {
		$(this).tooltip("show");
	});

	// hide tooltip on interaction with other elements
	$(document).on("focus keydown click", function(e) {
		if (!$(e.target).is('[data-toggle="tooltip"]')) {
			$(".tooltip").tooltip("hide");
		}
	});

	// trigger tooltip on focus
	$('[data-toggle="tooltip"]').on("focus", function() {
		$(this).tooltip("show");
	});

	// hide tooltip on interaction with other elements
	$(document).on("focus keydown click", function(e) {
		if (!$(e.target).is('[data-toggle="tooltip"]')) {
			$(".tooltip").tooltip("hide");
		}
	});
});