Javascript 鼠标事件和块元素

在我的文档中，有几个div带有

文本对齐：居中
：

<div>bla bla</div>
<div>bla bla bla bla</div>
<div>bla bla bla</div>

bla-bla
呜呜呜呜呜呜
呜呜呜呜

问题是，虽然内部内容可能不大，但div的
宽度：100%
可能会使它们比内容宽很多。鼠标事件被捕获在所有图示区域：

我用JavaScript创建了自己的自定义工具提示，当鼠标离内容太远或太远时，让它出现根本不合适

相反，我希望工具提示仅在其悬停在div的内容上时显示，或者至少使其看起来如此：

将div的
显示设置为
内联块
会将其大小缩小到内容的宽度，但也会使所有div显示在同一行中。

如果不使用
display:inline
并在所有div之间插入

s，有什么方法可以实现我想要的吗？这看起来根本不是一个方便的解决方案

编辑：
正如注释中所建议的，另一种可能的解决方案是将每个div的内容包装在
span
元素中，并将鼠标事件添加到该元素中，但这听起来也不是一种方便的解决方案，特别是因为div的内容可能会以编程方式更改。
这里有一个使用浮动的解决方案：。浮动（如绝对块、内联线和内联块）收缩包裹其内容

HTML:

将“显示类型”设置为“表格”，同时将“页边距”设置为“0自动”，将完成所需的操作

div {
    display: table;
    margin: 0 auto;
}

您也不需要再使用文本对齐：居中来执行此操作。
我不知道这是否是最优雅的解决方案，因此我将把它作为评论。您可以尝试将内容包装在
中，并对span的事件进行JSing。@KodleeYin我也想到了这一点，但被迫为每个需要工具提示的div添加
span
元素似乎非常乏味和不方便。这并不麻烦，非常实用。你必须有一些触发器，它不能只是一些文本，它必须是类、Id、数据属性、标记等等，使用触发器和文本创建span非常容易。@Aleksandar维护它很不方便，因为如果我想避免破坏工具提示，它会污染HTML代码，并使通过JavaScript更改div的内容更加困难。@Aleksandar我必须同意。我认为在你的例子中，在div内部有跨距是非常清楚和方便的。是的，你最终会得到更多的元素，但只要你不为网站的大小而疯狂，我几乎100%肯定，你不会注意到任何差异。关于可维护性：它不会使更改内容变得更加困难。如果没有span，您将更改div的内容。使用span，您只需更改span的内容。同样的任务。非常有趣的解决方案，但我必须说，对
转换
的不好支持让我有点厌烦…有趣，乍一看，这似乎像预期的那样工作。。。我得测试一下。太好了，问题解决了！我以以下形式使用它，以避免覆盖div的上下边距：
display:table；左边距：自动；右边距：自动
div {
    outline: 1px solid red;
    float: left;
    clear: left;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-bottom: 10px;
}

div {
    display: table;
    margin: 0 auto;
}