Bootstrap 4 blazor服务器客户端中的引导工具提示存在问题_Bootstrap 4

Bootstrap 4 blazor服务器客户端中的引导工具提示存在问题

bootstrap-4

Bootstrap 4 blazor服务器客户端中的引导工具提示存在问题,bootstrap-4,Bootstrap 4,我正在尝试为工具提示设置正确的格式，但我不知道如何设置。下面的代码非常有效： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no&

我正在尝试为工具提示设置正确的格式，但我不知道如何设置。下面的代码非常有效：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tooltip</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
</head>
<body>

    <a class="btn btn-primary btn-lg" href="#" data-toggle="tooltip" title="Default tooltip">Button!</a>

</body>
</html>


引导4工具提示
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});

在我的blazor服务器应用程序中，我在_host.cshtml中包含了完全相同的代码，但是工具提示没有得到正确的格式。我很确定这与渲染逻辑有关，因为如果我从一个可路由页面中获取工具提示元素，并将其直接放在_host.cshtml中，它就会工作。问题是，我怎样才能在我的可路由页面中正确地实现这一点

工具提示“Test1”是首选行为，该按钮直接在_host.cshtml中实现如果在一个可路由页面中实现相同的按钮，那么Test2'就是我得到的。标签如下所示：

<a class="btn btn-primary btn-lg" href="#" data-toggle="tooltip" data-placement="right" title="Test2">abc</a>

诀窍是从AfterRender上的page方法加载jquery脚本。cshtml文件中的代码段执行到很早，因此无法工作。当将jquery代码添加到单独的javascript文件中并使用onafterrendermethod从每个页面使用ijsruntime.Invokeasync执行该代码时，它工作得非常好

Javascript:

function addTooltips() {
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
        $(this).tooltip('hide');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
        $(this).tooltip('dispose');
    });
}

剃刀：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await js.InvokeVoidAsync("addTooltips");
    }
}

HTML:

编辑

我也有同样的问题，\u Host.cshtml中的按钮可以正常工作，但在razor页面中无法工作，您找到方法了吗？是的，诀窍是从AfterRender上的page方法加载jquery脚本。cshtml文件中的代码段会提前执行，因此可以将其删除。我在javascript文件中添加了jquery代码，并使用ijsruntime执行它。使用onafterrendermethod从每个页面调用Easync。你能分享你的代码吗？我应该在我的razor页面中更改任何内容吗？是的，在上面的答案中添加了它。你知道如何使用bootstrap 5而不使用jquery吗？你需要添加

@inject IJSRuntime JS

 <button class="btn btn-secondary" @onclick="@(() => Callback.InvokeAsync(Item))" data-toggle="tooltip" data-placement="top" title="Edit">Edit</button>