I’m trying to initialize multiple tooltips on a page, including tooltips in blazer components, but nothing works and there are no errors.
This is didn’t work for me:
<code>var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</code>
<code>var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</code>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
And this too:
<code>const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new
bootstrap.Tooltip(tooltipTriggerEl))
</code>
<code>const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new
bootstrap.Tooltip(tooltipTriggerEl))
</code>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new
bootstrap.Tooltip(tooltipTriggerEl))
But for a single tooltip this method works great:
<code>$(document).ready(function () {
$("body").tooltip({ selector: '[data-bs-toggle=tooltip]' });
});
</code>
<code>$(document).ready(function () {
$("body").tooltip({ selector: '[data-bs-toggle=tooltip]' });
});
</code>
$(document).ready(function () {
$("body").tooltip({ selector: '[data-bs-toggle=tooltip]' });
});
Maybe someone has already encountered something similar. I tried to connect the script everywhere possible and tried different versions of bootstrap.
0
Here are the working steps for you:
1.Ensure you have jQuery and Bootstrap included in your _Host.cshtml for Blazor Server:
<code>@page "/"
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
//...
</head>
<body>
//...
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/test.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
</code>
<code>@page "/"
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
//...
</head>
<body>
//...
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/test.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
</code>
@page "/"
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
//...
</head>
<body>
//...
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="~/test.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
2.Create a JavaScript file named test.js in the wwwroot folder with the following content:
<code>window.initializeTooltips = () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
};
$(document).ready(function () {
window.initializeTooltips();
});
</code>
<code>window.initializeTooltips = () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
};
$(document).ready(function () {
window.initializeTooltips();
});
</code>
window.initializeTooltips = () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
};
$(document).ready(function () {
window.initializeTooltips();
});
3.Modify your Blazor component to call this JavaScript function.
<code>@page "/"
@inject IJSRuntime JS
<h1 data-bs-toggle="tooltip" title="Hello, Tooltip!">Hover over me</h1>
<button data-bs-toggle="tooltip" title="Tooltip on button">Hover over button</button>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("initializeTooltips");
}
}
}
</code>
<code>@page "/"
@inject IJSRuntime JS
<h1 data-bs-toggle="tooltip" title="Hello, Tooltip!">Hover over me</h1>
<button data-bs-toggle="tooltip" title="Tooltip on button">Hover over button</button>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("initializeTooltips");
}
}
}
</code>
@page "/"
@inject IJSRuntime JS
<h1 data-bs-toggle="tooltip" title="Hello, Tooltip!">Hover over me</h1>
<button data-bs-toggle="tooltip" title="Tooltip on button">Hover over button</button>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("initializeTooltips");
}
}
}
2