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>
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.
