Require JavaScript Bundle
The HTML markup provided below outlines the required inclusions for JavaScript bundles and CSS stylesheets,
ensuring all necessary scripts and styles are properly integrated into your project.
<!DOCTYPE html>
<html>
<head>
<!--Vendor styles -->
<link href="/dist/assets/vendors/apexcharts/apexcharts.css" rel="stylesheet"/>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<h1>
Hello world!
</h1>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/ktui/ktui.min.js">
</script>
<script src="/dist/assets/vendors/apexcharts/apexcharts.min.js">
</script>
</body>
</html>
Data Attribute Initialization
The fastest way of initialization Metronic components is by using HTML data attribute
data-kt-tooltip="#tooltip_content"
, which allows
automatic instance creation upon page load.
metronic/tailwind/docs/views/pages/customization/javascript/code/data-kt-attribute-initialization.html
metronic/tailwind/docs/views/pages/customization/javascript/code/data-kt-attribute-initialization.js.html
Core components are globally initialized
with the
KTComponents.init()
JavaScript API, defined
in
core.bundle.js
, once the document is fully ready.
You can also use this API method to initialize components that dynamically added
to the page after the initial page load.
// Initialize global components once the document is fully loaded.
KTDom.ready(() => {
KTComponents.init();
});
JavaScript Initialization
You can manually initialize core components
with JavaScript as shown below. To do this, set
data-kt-tooltip="false"
to prevent the instance from
automatically initializing when the page loads.
// Tooltip toggle element
const tooltipEl = document.querySelector('#my_tooltip');
// Configuration options
const options = {
target: '#my_tooltip_content'
};
// Initialize object
const tooltip = new KTTooltip(tooltipEl, options);
// Use API methods
tooltip.show();
tooltip.hide();
tooltip.toggle();
<!--Tooltip toggle element-->
<button class="kt-btn kt-btn-primary" data-kt-tooltip="true" id="my_tooltip">
Toggle Tooltop
</button>
<!--Tooltip content element-->
<div class="tooltip" id="my_tooltip_content">
Hey, a delightful tooltip is here!
</div>
TypeScript Support
Metronic's core components are entirely written in TypeScript, offering robust typing and enhanced maintainability.
You can interact with these components using the TypeScript API, as demonstrated below.
Additionally, our
Webpack Build Tools
are configured to compile the TypeScript code, ensuring seamless integration and execution in your project.
import {
KTTooltip,
KTTooltipInterface,
KTTooltipConfigInterface }
from '@keenthemes/ktui/src/components/tooltip';
// Tooltip toggle element
const tooltipEl: HTMLElement = document.querySelector('#my_tooltip');
// Configuration options
const options: KTTooltipConfigInterface = {
target: '#my_tooltip_content'
};
// Initialize object
const tooltip: KTTooltipInterface = new KTTooltip(tooltipEl, options);
// Use API methods
tooltip.show();
tooltip.hide();
tooltip.toggle();
The Build Tools compile custom TypeScript files located in the
src/app
directory into
dist/assets/js/app
as JavaScript
making them ready for execution in modern browsers.
