javascript - 如何增加悬停时显示的工具提示的高度？

问题描述

我正在尝试在图标上设计一个悬停工具提示，但其内容不适合如下图所示。

如何将 HTML 和 CSS 代码应用于工具提示，使其看起来像下图中的多行而不是仅一行？

如何增加工具提示的高度？任何人都可以提供任何指导吗？谢谢

代码片段：

        [tooltip] {
            position: relative;
        }
        [tooltip]::before,
        [tooltip]::after {
            text-transform: none;
            /* opinion 2 */
            font-size: .9em;
            /* opinion 3 */
            line-height: 1;
            user-select: none;
            pointer-events: none;
            position: absolute;
            display: none;
            opacity: 0;
        }

        [tooltip]::before {
            content: '';
            border: 5px solid transparent;
            /* opinion 4 */
            z-index: 1001;
            /* absurdity 1 */
        }

        [tooltip]::after {
            content: attr(tooltip);

            font-family: Domine;
            min-width: 3em;
            max-width: 21em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 1ch 1.5ch;
            border-radius: .3ch;
            box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
            background: #333;
            color: #fff;
            z-index: 1000;
        }
        [tooltip]:hover::before,
        [tooltip]:hover::after {
            display: block;
        }
        [tooltip='']::before,
        [tooltip='']::after {
            display: none !important;
        }
        [tooltip][flow^="right"]::before {
            top: 50%;
            border-left-width: 0;
            border-right-color: #333;
            right: calc(0em - 5px);
            transform: translate(.5em, -50%);
        }
        [tooltip][flow^="right"]::after {
            top: 50%;
            left: calc(100% + 5px);
            transform: translate(.5em, -50%);
        }
        @keyframes tooltips-vert {
            to {
                opacity: .9;
                transform: translate(-50%, 0);
            }
        }
        @keyframes tooltips-horz {
            to {
                opacity: .9;
                transform: translate(0, -50%);
            }
        }
        [tooltip]:not([flow]):hover::before,
        [tooltip]:not([flow]):hover::after {
            animation: tooltips-vert 300ms ease-out forwards;
        }
        [tooltip][flow^="right"]:hover::before,
        [tooltip][flow^="right"]:hover::after {
            animation: tooltips-horz 300ms ease-out forwards;
        }

<!DOCTYPE html>
<html lang="en">
<head>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<body>
    <span tooltip="Watch this video to understand how Sociolancer works!" flow="right">
        <sup><i class="fas fa-info-circle"></i></sup>
    </span>
</body>

</html>

标签： javascripthtmljquerycsstooltip

javascript - 如何增加悬停时显示的工具提示的高度？

问题描述

解决方案

推荐阅读