Bootstrap 工具提示逐渐偏离中心

Question

https://file.coffee/u/R5wzGxVezHd.gif 我在使用 bootstrap 的工具提示时遇到以下问题逐渐偏离中心这是我用于图标的代码

{{#each guilds}}
<div class="col-sm-1">
    <a href="/dash/{{this.id}}">
        <div class="gicon">
        {{#if this.icon}}
        <img src="https://cdn.discordapp.com/icons/{{this.id}}/{{this.icon}}" alt="{{this.name}}" class="rounded-circle mt-4" width="75" height="75" id="{{this.id}}"  data-toggle="tooltip" data-placement="bottom" title="{{this.name}}">
        {{else}}
        <img src="/public/images/default_guild.png" alt="{{this.name}}" class="rounded-circle mt-4" width="75" height="75" id="{{this.id}}"  data-toggle="tooltip" data-placement="bottom" title="{{this.name}}">
        {{/if}}
        </div>
    </a>
</div>
{{/each}}

.gicon {
    transition: ease-in-out 0.2s;
}

.gicon:hover {
    filter: brightness(80%);
}

有谁知道为什么会这样以及如何解决它？

Answer 1

https://jsfiddle.net/kblau237/vx92pnec/3/

我继续用 jsfiddle 编写您的示例。您可以单击此 fiddle 并查看工具提示确实居中。希望这篇 post 对您有所帮助。它用作模型，用于使工具提示居中。

我将图像放在名为 Images 的文件夹中。 javascript 代码在脚本中的级别相似。

https://jsfiddle.net/kblau237/vx92pnec/3/

脚本

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index6</title>
    <style type="text/css">
        .gicon {
            transition: ease-in-out 0.2s;
        }

            .gicon:hover {
                filter: brightness(80%);
            }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>

    <script type="text/javascript">
        //credit stack overflow
        $(function () {
            $("body").tooltip({ selector: '[data-toggle=tooltip]' });
            var an_array = [
                { id: 1, name: "Guild Name 1", imgURL: "https://file.coffee/u/R5wzGxVezHd.gif" },
                { id: 2, name: "Guild Name 2", imgURL: "https://file.coffee/u/R5wzGxVezHd.gif" }
            ];
            var source = $("#src").html();
            var template = Handlebars.compile(source);
            $("body").append(template({ guilds: an_array }));
        })
    </script>
</head>
<body>
    Tooltips are centered
    <script type='text/template' id='src'>
        {{#each guilds}}
        <div class="col-sm-1">
            <a href="/dash/{{this.id}}">
                <div class="gicon">
                    @*Changed the order of the images*@
                    {{#if this.icon}}
                    <img src="https://cdn.discordapp.com/icons/{{this.id}}/{{this.icon}}" alt="{{this.name}}" class="rounded-circle mt-4" width="75" height="75" id="{{this.id}}" data-toggle="tooltip" data-placement="bottom" title="{{this.name}}">
                    {{else}}
                    <img src="{{imgURL}}" alt="{{this.name}}" class="rounded-circle mt-4" width="75" height="75" id="{{this.id}}" data-toggle="tooltip" data-placement="bottom" title="{{this.name}}">
                    {{/if}}
                </div>
            </a>
        </div>
        {{/each}}
    </script>
</body>
</html>

Bootstrap 工具提示逐渐偏离中心

Bootstrap tooltips progressively off center

css

handlebars.js

bootstrap-4