Menu
I am trying to initialize foundation tool-tip without initializing everything (i.e. $(document).foundation()) and I am failing in this simple task.
I am wondering (1) How to use new Foundation.Tooltip instead (2) do I need modernizr because documentation in foundation website did not mention modernizr as a requirement.
I mentioned modernizr because without that tool-tip would not have any styles nor html inside that would show.
Thank you
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
<body>
<div class="row">
<span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
Hover me
</span>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
// $(document).foundation();
})
</script>
</body>
</html>
743
To answer the second part first: Foundation 6 doesn't require Modernizr (but F5 did) (see: http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6) so you can use all of the Foundation 6 components entirely without Modernizr.
In your example I think you are mixing creating a tooltip dynamically:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
With initialising a tooltip:
$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally
OR
$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)
So to create and then initialise JUST the tooltips:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
$('.has-tip').foundation();
For obvious reasons creation must precede initialisation.
See example: https://jsfiddle.net/tymothytym/b6eoh2yg/1/
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
