I have an SVG of maps, whose path value comes from the back end and prints properly.
Now when I hover my mouse cursor over a location, it pops up like a google map with the details of that location, like Total Completed Batch, Ongoing Batch, or something else. Although I can print the name through tool kit, I am not able to get the details.
@extends('layouts.trainee')
@section('content')
<style>
.map-district {
cursor: pointer;
stroke: white;
color: black;
}
.map-district:hover {
fill: #ffc107;
}
text {
display: block;
}
.legend {
display: flex;
flex-direction: column;
gap: 10px;
font-family: Arial, sans-serif;
color: #6B7280;
}
.legend-item {
display: flex;
align-items: center;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 10px;
}
.live-class {
background-color: #F97316;
/* orange */
}
.completed-class {
background-color: #10B981;
/* green */
}
.no-training {
background-color: #9CA3AF;
/* gray */
}
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
width: 250px;
text-align: center;
font-family: Arial, sans-serif;
}
.card-header {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 10px;
}
.card-body {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-item {
display: flex;
flex-direction: column;
align-items: center;
color: #10B981;
/* Default color for text */
}
.card-item.completed .icon,
.card-item.completed .text,
.card-item.completed .count {
color: #10B981;
}
.card-item.ongoing .icon,
.card-item.ongoing .text,
.card-item.ongoing .count {
color: #10B981;
}
.card-item.live .icon,
.card-item.live .text,
.card-item.live .count {
color: #EF4444;
}
.icon {
font-size: 1.5em;
margin-bottom: 5px;
}
.text {
font-size: 0.9em;
}
.count {
font-size: 1.1em;
font-weight: bold;
}
.tooltip {
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 10px;
z-index: 1000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.tooltip h3:hover {
margin: 0 0 10px;
}
.tooltip span:hover {
display: block;
background-color: red;
}
</style>
<div class="large-screen-hero-section flex justify-center lg:h-[560px]">
<div class="relative bg-white rounded-lg p-8 flex flex-col md:flex-row items-center md:space-x-8 w-full max-w-[1920px]">
<div class="absolute inset-0 overflow-hidden">
<img src="{{asset('assets/images/Land-page/hero-student/back-final.png')}}" alt="Background" class="w-full h-full object-cover">
</div>
<div class="relative md:w-2/3 z-10 " id="hero-section">
<h1 class="hero-title text-3xl text-[#0096DB] font-bold mb-4 2xl:items-center 2xl:ml-[130px] custom-zoom">Student Training</h1>
<p class="hero-sub-title text-xl mb-6 mr-[180px] lg:w-[25rem] xl:w-[30rem] 2xl:w-[40rem] 2xl:ml-[130px] text-justify text-black custom-zoom">Our student training programs offer a wide range of courses, from basic networking and digital marketing to advanced programming and data analysis, designed to equip students with the skills needed for the modern workforce. Build a strong foundation with cutting-edge expertise!</p>
<button onclick="scrollToAnchor('tracks')" class=" bg-[#0096DB] text-white px-4 py-2 rounded 2xl:ml-[130px] ">Explore Tracks</button>
<!-- <button onclick="scrollToAnchor('student-training-mind-map')" class=" bg-[#0096DB] text-white px-4 py-2 rounded 2xl:ml-[130px] custom-zoom">Learn More!</button> -->
<!-- <button id="openModal" class=" bg-[#0096DB] text-white px-4 py-2 rounded 2xl:ml-[130px] custom-zoom">Explore Mind Map!</button> -->
</div>
</div>
</div>
<!-- Mobile view hero section start -->
<div class="small-screen-hero-section flex justify-center">
<div class="relative rounded-lg flex flex-col md:flex-row items-center md:space-x-8 w-full">
<div class="absolute inset-0 overflow-hidden">
<img src="{{asset('assets/images/Land-page/hero-section-for-responsive/student-training2.png')}}" alt="Background" class="mobile-view-common-landing-background-img w-full h-[642px]" style="height:268px !important">
</div>
<div class="relative md:w-2/3 z-10 mt-[268px] bg-[#E6EEF4] mx-auto flex flex-col items-center pb-3">
<h1 class=" text-3xl text-black font-bold my-4 2xl:items-center 2xl:ml-[170px] uppercase">Student <span class="text-[#0096DB]">Training</span> </h1>
<p class=" text-[16px] mb-4 lg:w-[25rem] xl:w-[30rem] 2xl:w-[40rem] 2xl:ml-[170px] text-justify text-gray-500 px-4">Our student training programs offer a wide range of courses, from basic networking and digital marketing to advanced programming and data analysis, designed to equip students with the skills needed for the modern workforce. Build a strong foundation with cutting-edge expertise!</p>
<!-- <a href="{{route('company.registration')}}" class="mb-4">
<button class="bg-[#0096DB] text-white px-4 py-2 rounded 2xl:ml-[130px] ">Explore Tracks</button>
</a> -->
<button onclick="scrollToAnchor('tracks')" class="bg-[#0096DB] text-white px-4 py-2 rounded 2xl:ml-[130px]">Explore Tracks</button>
</div>
</div>
</div>
</div>
<!-- Mobile view hero section end -->
<section class="middle_part mt-12 2xl:px-3">
<div class="explore-tracks flex justify-center lg:gap-[842px] mb-3 2xl:gap-[550px]" id="tracks">
<h5 class="explore-header font-bold text-4xl 2xl:w-[600px]">Explore a wide range of tracks</h5>
<button onclick="window.location.href='{{ route('all-tracks') }}'" class="explore-button bg-[#0096DB] text-white px-4 py-2 rounded uppercase">View All Tracks <i class="fa fa-arrow-right"></i> </button>
</div>
<div class="mb-10 flex justify-center lg:pt-2 sm:pt-12">
<div class="lg:flex justify-center items-center gap-4 ">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="tracks course mx-auto sm:mx-0">
<img src="{{asset('assets/images/public-trainee-track/Software Development and Programming.png')}}" alt="" class="img-fluid mx-auto d-sm-done " />
<!-- <hr class="bg-[#0178CF] hidden sm:block" style="width: 100%; height: 10px; border: none;"> -->
<p class="text-[#0096DB] font-semibold text-center my-6 text-xl">Software Development <br> and Programming</p>
</div>
<div class="tracks course mx-auto sm:mx-0">
<img src="{{asset('assets/images/public-trainee-track/Cloud Technologies and Architecture.png')}}" alt="" class="img-fluid mx-auto d-sm-done " />
<!-- <hr class="bg-[#0178CF] hidden sm:block" style="width: 100%; height: 10px; border: none;"> -->
<p class="text-[#0096DB] font-semibold text-center my-6 text-xl">Cloud Technologies <br> and Architecture</p>
</div>
<div class="tracks course mx-auto sm:mx-0">
<img src="{{asset('assets/images/public-trainee-track/Cybersecurity and Quality Assurance.png')}}" alt="" class="img-fluid mx-auto d-sm-done " />
<!-- <hr class="bg-[#0178CF] hidden sm:block" style="width: 100%; height: 10px; border: none;"> -->
<p class="text-[#0096DB] font-semibold text-center my-6 text-xl">Cybersecurity and <br> Quality Assurance</p>
</div>
<div class="tracks course mx-auto sm:mx-0">
<img src="{{asset('assets/images/public-trainee-track/Artificial Intelligence and Machine Learning.png')}}" alt="" class="img-fluid mx-auto d-sm-done w-full" />
<!-- <hr class="bg-[#0178CF] hidden sm:block" style="width: 100%; height: 10px; border: none;"> -->
<p class="text-[#0096DB] font-semibold text-center my-6 text-xl">Artificial Intelligence <br> and Machine Learning</p>
</div>
</div>
</div>
</div>
</div>
</section>
<hr style="width: 65%; height: 3px; background-color: #EEEEEE; border: none; margin: 20px auto; ">
<!-- Pop up Start -->
<div id="mindMapPopup" class="mind-map-popup flex items-center justify-center">
<!-- Modal -->
<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden modal ">
<div class="student-mind-map bg-white rounded-lg overflow-hidden shadow-lg relative p-4">
<button id="closeModal" class="absolute top-2 right-2 text-white bg-[#0096DB] lg:px-3 lg:py-2 px-2 py-1 rounded font-bold text-xl">
×
</button>
<img src="{{asset('assets/images/student-training-mind-map.png')}}" class=" lg:h-[400px] md:h-[250px] h-[120px] px-2" alt="student-mind-map">
</div>
</div>
</div>
<!-- learner outcomes new design on 07/07/24 -->
<section class="last_part flex justify-center my-10 gap-[40px] ">
<div class="left-side flex justify-center">
<div class="bg-[#EBF2FA] lg:h-[100%] md:h-[200px] h-[300px] lg:w-[655px] md:w-[500px] w-[350px] rounded-3xl flex items-center ">
<div class="lg:px-16 px-8 space-y-5 ">
<p class="learner-outcomes-left-title lg:text-[60px] md:text-[40px] sm:text-[30px] text-[25px] font-extrabold lg:leading-snug md:leading-snug leading-tight">Learner <br /> Outcomes in <br />Student Training</p>
<p class="lg:text-[23px] text-[16px] text-justify">By the end of the training, students will have practical knowledge in various IT and digital disciplines, preparing them for successful careers in their chosen fields</p>
</div>
</div>
</div>
<div class="right-side flex">
<div class="">
<div class="flex">
<div class="relative ">
<img src="{{asset('assets/images/Land-page/back-shape/upskill.svg')}}" alt="upskill" class="upskill lg:h-[95%]" />
<h5 class="absolute lg:top-[38%] lg:left-8 lg:text-[1.25rem]">Upskill Community</h5>
<p class="absolute lg:top-[50%] lg:left-8 lg:w-[80%] lg:text-[14px]">Collaborate to strengthen community skills and drive innovation within local industries</p>
</div>
<div class="relative ">
<img src="{{asset('assets/images/Land-page/back-shape/professionals.svg')}}" alt="professionals" class="professionals lg:h-full lg:w-full" />
<h5 class="absolute lg:top-[38%] lg:left-8 lg:text-[1.25rem]">Professionals</h5>
<p class="absolute lg:top-[50%] lg:left-8 lg:text-[14px] lg:w-[80%]">Excel in Your Career: Gain advanced knowledge to stay competitive in your professional journey</p>
</div>
</div>
<div class="flex">
<div class="relative mr-5 ">
<img src="{{asset('assets/images/Land-page/back-shape/call.svg')}}" alt="upskill" class="future-leader lg:h-full" />
</div>
<div class="relative ">
<img src="{{asset('assets/images/Land-page/back-shape/business.svg')}}" alt="professionals" class="future-leader lg:h-full lg:w-full" />
<h5 class="absolute lg:top-[38%] lg:left-8 lg:text-[1.25rem]">Future Leaders</h5>
<p class="absolute lg:top-[50%] lg:left-8 lg:text-[14px] lg:w-[80%]">Develop leadership qualities and strategic thinking to lead with confidence and vision</p>
</div>
</div>
</div>
</div>
</section>
<!-- allignment design changed on 30/06/24 end -->
<!-- -->
<div class="container mx-auto mt-8">
<div class="w-full mx-auto">
<div class="max-w-xl p-4 text-center mx-auto">
<h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-900">Discover Our Nationwide Network</h2>
<p class="text-lg text-gray-700 mt-4">Click on any district to see our training programs and facilities in that area.</p>
</div>
</div>
<div class="lg:flex lg:space-x-8">
<div class="lg:w-9/12">
<div class="max-w-4xl mx-auto relative mt-5">
<svg id="bangladesh-map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-auto">
@foreach ($districtData as $district => $data)
<path d="{{ $data['map_path'] }}" class="map-district" data-title="{{ $data['area_nm'] }}" data-completed="{{ $data['completed'] }}" data-ongoing="{{ $data['ongoing'] }}" data-upcoming="{{ $data['upcoming'] }}" data-total="{{ $data['total'] }}" data-students-upcoming="{{ $data['students_upcoming'] }}" data-students-ongoing="{{ $data['students_ongoing'] }}" data-students-completed="{{ $data['students_completed'] }}" fill="{{ $data['students_upcoming'] > 0 || $data['students_ongoing'] > 0 || $data['students_completed'] > 0 ? '#10B981' : 'gray' }}">
<text transform="$data['matrix']">{{ $data['area_nm'] }}</text>
</path>
@endforeach
@foreach ($districtData as $district => $data)
<text style="cursor: pointer;" transform="matrix({{ $data['matrix'] }})">
{{ $data['area_nm']}}
</text>
@endforeach
</svg>
<div class="tooltip">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<div class="card-item completed">
<div class="icon">✔️</div>
<div class="text">Completed</div>
<div class="count"></div>
</div>
<div class="card-item ongoing">
<div class="icon">????</div>
<div class="text">Ongoing</div>
<div class="count">15</div>
</div>
<div class="card-item live">
<div class="icon">????</div>
<div class="text">LIVE</div>
<div class="count">5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Information Container -->
<div class="lg:w-3/12">
<div class="max-w-5xl mx-auto relative mt-8">
<div class="legend">
<div class="legend-item">
<div class="legend-color live-class"></div>
<span>Live Class</span>
</div>
<div class="legend-item">
<div class="legend-color completed-class"></div>
<span>Completed / Ongoing Class</span>
</div>
<div class="legend-item">
<div class="legend-color no-training"></div>
<span>No Training</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function detectZoom() {
const zoomLevel = Math.round(window.devicePixelRatio * 100);
const heroSection = document.getElementById('hero-section');
if (zoomLevel === 125) {
heroSection.classList.add('custom-zoom');
} else {
heroSection.classList.remove('custom-zoom');
}
}
window.addEventListener('resize', detectZoom);
window.addEventListener('load', detectZoom);
</script>
<!-- Pop up -->
<script>
const openModalButton = document.getElementById('openModal');
const closeModalButton = document.getElementById('closeModal');
const modal = document.getElementById('modal');
openModalButton.addEventListener('click', () => {
modal.classList.remove('hidden');
document.body.classList.add('modal-active');
});
closeModalButton.addEventListener('click', () => {
modal.classList.add('hidden');
document.body.classList.remove('modal-active');
});
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.classList.add('hidden');
document.body.classList.remove('modal-active');
}
});
</script>
<script>
document.getElementById('openModalInSmallDevice').addEventListener('click', function() {
document.getElementById('modal').classList.remove('hidden');
document.getElementById('mindMapPopup').classList.remove('hidden');
});
document.getElementById('closeModal').addEventListener('click', function() {
document.getElementById('modal').classList.add('hidden');
document.getElementById('mindMapPopup').classList.add('hidden');
});
</script>
<script>
const paths = document.querySelectorAll('.map-district');
const tooltip = document.querySelector('.tooltip');
paths.forEach(path => {
path.addEventListener('mouseover', (event) => {
const bbox = event.target.getBoundingClientRect();
tooltip.innerHTML = event.target.dataset.title;
tooltip.style.left = `${bbox.left + bbox.width / 2}px`;
tooltip.style.top = `${bbox.top + bbox.height / 2}px`;
tooltip.style.opacity = '1';
});
path.addEventListener('mouseout', () => {
tooltip.style.opacity = '0';
});
path.addEventListener('click', (event) => {
const districtData = {
title: event.target.dataset.title,
completed: event.target.dataset.completed,
ongoing: event.target.dataset.ongoing,
upcoming: event.target.dataset.upcoming,
total: event.target.dataset.total,
studentsUpcoming: event.target.dataset.studentsUpcoming,
studentsOngoing: event.target.dataset.studentsOngoing,
studentsCompleted: event.target.dataset.studentsCompleted
};
updateCardContent(districtData);
});
});
function updateCardContent(data) {
const cardHeader = document.querySelector('.card-header');
const completedItem = document.querySelector('.card-item.completed .count');
const ongoingItem = document.querySelector('.card-item.ongoing .count');
const liveItem = document.querySelector('.card-item.live .count');
cardHeader.textContent = data.title;
completedItem.textContent = data.completed;
ongoingItem.textContent = data.ongoing;
liveItem.textContent = data.upcoming;
}
</script>
@endsection
I tried the style approx. But my real concern is this section.
<div class="tooltip">
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<div class="card-item completed">
<div class="icon">✔️</div>
<div class="text">Completed</div>
<div class="count"></div>
</div>
<div class="card-item ongoing">
<div class="icon">????</div>
<div class="text">Ongoing</div>
<div class="count">15</div>
</div>
<div class="card-item live">
<div class="icon">????</div>
<div class="text">LIVE</div>
<div class="count">5</div>
</div>
</div>
</div>
</div>
I want to print through this div, but the tooltip is not clickable. And proper information does not come.
<script>
const paths = document.querySelectorAll('.map-district');
const tooltip = document.querySelector('.tooltip');
paths.forEach(path => {
path.addEventListener('mouseover', (event) => {
const bbox = event.target.getBoundingClientRect();
tooltip.innerHTML = event.target.dataset.title;
tooltip.style.left = `${bbox.left + bbox.width / 2}px`;
tooltip.style.top = `${bbox.top + bbox.height / 2}px`;
tooltip.style.opacity = '1';
});
path.addEventListener('mouseout', () => {
tooltip.style.opacity = '0';
});
path.addEventListener('click', (event) => {
const districtData = {
title: event.target.dataset.title,
completed: event.target.dataset.completed,
ongoing: event.target.dataset.ongoing,
upcoming: event.target.dataset.upcoming,
total: event.target.dataset.total,
studentsUpcoming: event.target.dataset.studentsUpcoming,
studentsOngoing: event.target.dataset.studentsOngoing,
studentsCompleted: event.target.dataset.studentsCompleted
};
updateCardContent(districtData);
});
});
function updateCardContent(data) {
const cardHeader = document.querySelector('.card-header');
const completedItem = document.querySelector('.card-item.completed .count');
const ongoingItem = document.querySelector('.card-item.ongoing .count');
const liveItem = document.querySelector('.card-item.live .count');
cardHeader.textContent = data.title;
completedItem.textContent = data.completed;
ongoingItem.textContent = data.ongoing;
liveItem.textContent = data.upcoming;
}
</script>
I tried to print through above script but failed. I’ve kept each script separate for development convenience. I will merge the final product.
enter image description here
This will be my final output for map.
New contributor
Mehdi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.