Skip to content

Instantly share code, notes, and snippets.

@ShigeoTejima
Created February 7, 2017 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ShigeoTejima/8b335b15be9881a8d8c4f21c53b1c46a to your computer and use it in GitHub Desktop.
Save ShigeoTejima/8b335b15be9881a8d8c4f21c53b1c46a to your computer and use it in GitHub Desktop.
Tooltip when bootstrap.js and jquery-ui.js both exist.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
<!-- jquery-ui load after bootstrap.js -->
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jquery-ui.theme.css">
<!-- at first, jquery-ui without Tooltip load -->
<script src="js/jquery-ui_without_tooltip.js"></script>
<script>
// bootstrap.js:Tooltip defined $.fn.tooltip and $.fn.tooltip.Constructor
// when not defined them, may not load bootstrap.js:Tooltip
// then load jquery-ui:Tooltip
if (!$.fn.tooltip || !$.fn.tooltip.Constructor) {
document.write('<script src="js/jquery-ui_tooltip.js"><\/script>')
}
</script>
<script>
$(function() {
if ($.fn.tooltip) {
$("input[name=foo]").tooltip();
}
});
</script>
</head>
<body>
<div class="container">
<p>Test</p>
<input type="text" name="foo" title="This is a tooltip.">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment