<title>Bootstrap 5 Nav Tabs on Hover</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<h2>Create Hover Nav Tabs in Bootstrap 5</h2>
<ul class="nav nav-tabs" role="tablist">
<a class="nav-link active" data-bs-toggle="tab" href="#menu1">Menu 1</a>
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
<a class="nav-link" data-bs-toggle="tab" href="#menu3">Menu 3</a>
<div class="tab-content">
<div id="menu1" class="container tab-pane active"><br>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div id="menu2" class="container tab-pane fade"><br>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<div id="menu3" class="container tab-pane fade"><br>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
var btn = document.querySelectorAll('.nav-tabs > li > a');btn.forEach(function(anchor) { anchor.addEventListener('mouseover', function() { new bootstrap.Tab(this).show();