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/apexcharts/apexcharts.min.js">
</script>
</body>
</html>
Data Attribute Initialization
The fastest way of initialization Metronic components is by using HTML data attribute
data-tooltip="#tooltip_content"
,
which allows automatic instance creation upon page load.
<!--Tooltip toggle element-->
<button class="btn btn-primary" data-tooltip="#my_tooltip_content" id="my_tooltip">
Toggle Tooltop
</button>
<!--Tooltip content element-->
<div class="tooltip" id="my_tooltip_content">
Hey, a delightful tooltip is here!
</div>
// Tooltip toggle HTML element
const tooltipEl = document.querySelector('#my_tooltip');
// Retrieve the tooltip object bound to the HTML element.
const tooltip = KTTooltip.getInstance(tooltipEl);
// Use API methods
tooltip.show();
tooltip.hide();
tooltip.toggle();
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-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="btn btn-primary" data-tooltip="false" 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 '../../core/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.