jQuery Tooltips仅在HTML代码中但不可见

Question

我正在尝试使用jQuery和工具提示在网站上提供一些美观的帮助按钮。

但是当您搜索“元素”时它们会出现，但它们不会显示。

以下是一些代码：

<div class="card-header">
    <h5 style="float: left">Eckdaten</h5>
    <button id="help" type="button" class="btn btn-outline-secondary" 
            data-toggle="tooltip" data-placement="left" 
            title="TestTest" style="float: right; padding-left: 8px; padding-right: 8px">
        <i class="fas fa-life-ring"> <Hilfe
    </button>
</div>

在脚本部分：

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

src files:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.js"> 
</script>

每当鼠标悬停在html代码中时，都会显示一个工具提示，但实际的框不会显示。

非常感谢您的帮助！

Answer 1

您的HTML结构无效。您的 font awesome 图标需要关闭。

将 rownames_to_column(df1, 'rn') %>% gather(key, val, matches("^var\\d+$")) %>% group_by(rn, val) %>% mutate(n = case_when(key == "var3" ~ var3values, key == "var4" ~ var4values, TRUE ~ as.numeric(n()))) %>% select(-var3values, -var4values, -key) %>% spread(val, n, fill = 0) %>% ungroup %>% select(-rn) # A tibble: 4 x 11 # Value1 Value2 AwayEast AwayHOU AwayLAN AwaySDN AwayWest HomeATL HomeEast HomeSame HomeWest # <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> #1 9.33 1 0 1 0 0 5 1 1 0 0 #2 32.4 2 0 0 0 1 6 1 0 0 2 #3 54.8 3 3 0 1 0 0 1 0 7 0 #4 54.8 8 0 0 1 0 4 1 8 0 0 替换为已关闭的<Hilfe将解决此问题。

https://jsfiddle.net/davidliang2008/2dqa1fvu/4/