在Bootstrap上使用CSS的工具提示不起作用

Question

我正在尝试在我的引导网站上执行此操作： https://www.w3schools.com/howto/howto_css_tooltip.asp

但是没有，关于如何使它起作用的任何建议？我在不使用引导程序且没有问题的网站上使用了此解决方案。

aspx代码：

<ItemTemplate>
                                                                       <div class="tooltip">
                                                                        <i id="collapse3" runat="server" class="fa fa-caret-square-left fa-lg" aria-hidden="true"></i>
                                                                        <span class="tooltiptext" style="width: 115px;" id="litAttivita" runat="server">
                                                                            <asp:LinkButton ID="lnkSelAtt" runat="server" CausesValidation="False" CommandName="Dettagli" Text="Dettagli"><i class="fa fa-search fa-lg" title="Dettagli"></i></asp:LinkButton>
                                                                            &nbsp;<asp:LinkButton ID="lnkComplAtt" runat="server" CausesValidation="false" CommandName="Completa" Text="Attività completata"><i class="fa fa-check fa-lg" title="Attività completata"></i></asp:LinkButton>
                                                                            &nbsp;<asp:LinkButton ID="lnkEditAtt" runat="server" CausesValidation="false" CommandName="Aggiorna" Text="Modifica"><i class="fa fa-pencil fa-lg" title="Modifica"></i></asp:LinkButton>
                                                                            &nbsp;<asp:LinkButton ID="lnkDelAtt" runat="server" CausesValidation="False" CommandName="Delete" Text="Elimina" OnClientClick="return confirm('Sei sicuro di voler eliminare la attivita?')"><i class="fa fa-trash fa-lg" title="Elimina"></i></asp:LinkButton>
                                                                        </span>
                                                                    </div>
                                                                </ItemTemplate>
                                                            

页面插入：

<link rel="stylesheet" href="Content/bootstrap.css" />
    <link rel="stylesheet" href="Content/aggiunte.css" />
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <script src="Scripts/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="Content/jquery-ui.css" />
    <script src="Scripts/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="Content/fontawesome-all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    <link href="Content/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/select2.min.js"></script>
    <script type="text/javascript" src="Scripts/it.js"></script>
    <link href="Content/footable.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/footable.min.js"></script>

css：

.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 130px;
        background-color: rgba(0, 0, 0, 0.90);
        border: solid 3px;
        border-color: dimgray;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        top: -13px;
        right: 110%;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
        -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
        -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
        -webkit-transition: visibility 1s linear;
        -moz-transition: visibility 1s linear;
        -o-transition: visibility 1s linear;
        transition: visibility 1s linear;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent dimgray;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        overflow: visible;
    }