Bootstrap4多个数据切换与工具提示和按钮？

Question

因为它实际上（在Bootstrap 4中）不能立刻设置多个数据切换，所以我找到了这个解决方案来使它工作。

<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Flexible Arbeitszeiten"><i class="fas fa-clock"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Home-Office"><i class="fas fa-home"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Betriebliche Altersvorsorge"><i class="fas fa-shield-alt"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Gesundheits- und Sportangebote"><i class="fas fa-heartbeat"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Firmen-Laptop"><i class="fas fa-laptop"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Firmen-Smartphone"><i class="fas fa-mobile-alt"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Kantine"><i class="fas fa-utensils"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Kinderbetreuuung"><i class="fas fa-child"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Firmenwagen"><i class="fas fa-car"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Gute Zuganbindung"><i class="fas fa-train"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Gute Zuganbindung"><i class="fas fa-subway"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Gute Busanbindung"><i class="fas fa-bus"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Weiter- / Fortbildungen"><i class="fas fa-graduation-cap"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Mitarbeiterbeteiligung / -boni"><i class="fas fa-percent"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Jobticket"><i class="fas fa-ticket-alt"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Sabbatical"><i class="fas fa-stopwatch"></i></button>
<button type="button" class="btn btn-secondary btn-md" data-toggle="buton" data-hover="tooltip" data-placement="bottom" title="Mitarbeiterevents"><i class="fas fa-glass-martini"></i></button>

在我的JavasScript中我初始化工具提示以这种方式切换

$("[data-hover='tooltip']").tooltip();

所以它有效，但我有一个问题。如果我单击按钮并且按钮处于活动状态，则工具提示会显示整个时间，因为我单击了一个按钮。但是当我将光标移出按钮焦点时工具提示应该消失，就像正常的工具提示行为一样。我该如何解决这个问题？

当我没有点击任何按钮并仅将光标移到按钮上时，工具提示正在显示并消失。

以下是问题的屏幕截图：