Question

我正在尝试手风琴和工具提示。我的目标是拥有一个手风琴，在其中可以有一个信息表，该信息表的右边带有问号，当我将其悬停在上面时，它将用作工具提示。

我已经提出了一个设计方案，并且也遵循了Bootstrap 4文档，但是在编写功能性工具提示方面没有成功。

HTML：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tooltips Testing Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

            <!-- DOCUMENT/CODE LINKS -->
        
        <link rel="stylesheet" type="text/css" href="Tooltips.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        
    </head>
        <body>
                    <table class="table table-dark">
                      <thead>
                        <tr>
                          <th scope="col">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row" style="font-weight: 400;">1(01)</th>
                          <td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
    </body>
    
    <!-- JAVASCRIPT SCRIPTS -->
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
</html>

CSS：

    .accordion {
    margin: 3vw;
    border: #383838;
}

.card-header.collapsed {
    background: #343a40;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
    
}
.card-header:not(.collapsed) {
    background:#343a40;
    border-bottom: transparent;  
}

衷心感谢您为使工具提示正常工作所提供的任何帮助。

Answer 1

尝试从脚本引用中删除此行：

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

一旦删除它，它就可以按照您想要的方式工作。

手风琴内的工具提示

1 个答案: