2020年新年大赛！

Question

Алхимик

Asked:2022-07-25 08:24:35 +0000 UTC2022-07-25 08:24:35 +0000 UTC 2022-07-25 08:24:35 +0000 UTC

HTML - 工具提示定位

772

关于 HTML/CSS 的最菜鸟问题又是我。

总的来说，有一段代码，存在三个问题：

当文本位于侧面时，工具提示会从窗口中弹出。
我希望工具提示相对于调用它的短语的中心定位
我还希望一旦鼠标超出导致工具提示的单词，工具提示就会消失。也就是说，在这种情况下，原来道恩强森挡住了莫蒂，这不是很方便。

编码

<!DOCTYPE html>
<html>
<style>
  img * {
    max-height: 100px;
    max-width: 200px;
  }
  
  body * {
    display: inline-block;
  }
  
  .tooltiped {
    position: relative;
  }
  
  .tooltiped .tooltip {
    position: absolute;
    max-width: 300px;
    min-width: 200px;
    z-index: 1;
    left: 0px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transition: ease 0.11s;
  }
  
  .tooltiped:hover .tooltip {
    padding-top: 15px;
    visibility: visible;
    opacity: 1;
  }
  
  .tooltiped .tooltip .tooltip-content {
    max-width: 300px;
    min-width: 200px;
    padding: 0.5em;
    z-index: 10;
    display: block;
    background-color: #3989c9;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    background: #3989c9;
    text-align: center
  }
  
  .tooltiped .tooltip .tooltip-content,
  .tooltiped .tooltip .tooltip-content a {
    color: #fff
  }
</style>
<title>Online HTML Editor</title>

<head>
</head>

<body>
  <p>Тестовый текст. Допустим у нас есть
    <span>
    <div class="tooltiped">
        Квентин Тарантино Тарантинович
    
        
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.film.ru/sites/default/files/filefield_paths/qt8-the-first-eight-arriva-trailer-documentario-tarantino-v4-407203-1280x720.jpg" alt="babababa" max-height="300" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

            </div>
        </div>
    </div>
    </span> и мы хотим снять с ним кино в духе
    <span>
    <div class="tooltiped">
        Рика и Морти
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYELGsc6h5OLMZwb4TB9eqbDi928XIJe9R6A&usqp=CAU" alt="babababa"  max-height="300"  width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
            </div>
        </div>
    </div>
    </span>
    </br>Таким образом мы должны взять на главную роль
    <span>
    <div class="tooltiped">
        Кристиана Бейла
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.mirf.ru/wp-content/uploads/2016/01/bale-start.jpg" alt="babababa"  max-height="300"  width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
            </div>
        </div>
    </div>
    </span> на роль
    <span><div class="tooltiped">
        Рика Санчеза
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://rickandmorty.fandom.com/ru/wiki/%D0%A0%D0%B8%D0%BA_%D0%A1%D0%B0%D0%BD%D1%87%D0%B5%D0%B7"><img src="https://static.wikia.nocookie.net/rickandmorty/images/8/81/%D0%A0%D0%B8%D0%BA_%D0%A1%D0%B0%D0%BD%D1%87%D0%B5%D0%B7_001.jpg/revision/latest/scale-to-width-down/270?cb=20200222114630&path-prefix=ru" alt="babababa"  height="200px"  width="100%"></a></br> Рик Санчес (англ. Rick Sanchez) — один из двух главных героев американского мультсериала «Рик и Морти», созданного Джастином Ройландом и Дэном Хармоном. Рик — гениальный учёный, алкоголик, реалист, атеист и мизантроп; для него характерны цинизм и пренебрежение общепринятыми нормами поведения.
            </div>
        </div>
    </div>
    </span> и
    <span><div class="tooltiped">
        Дуэйна Джонсона
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B6%D0%BE%D0%BD%D1%81%D0%BE%D0%BD,_%D0%94%D1%83%D1%8D%D0%B9%D0%BD"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Dwayne_Johnson_2014%28Cropped%29.jpg/274px-Dwayne_Johnson_2014%28Cropped%29.jpg" alt="babababa" max-height="300" width="100%"></a> Дуэ́йн Ду́глас Джо́нсон (англ. Dwayne Douglas Johnson; род. 2 мая 1972 года, Хейвард, США) — американский киноактёр, предприниматель, музыкант, певец[1], в прошлом — рестлер[2]. Известен под псевдонимом Скала́ (англ. The Rock).
            </div>
        </div>
    </div></span> на роль
    <span><div class="tooltiped">
        Морти
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D1%80%D1%82%D0%B8_%D0%A1%D0%BC%D0%B8%D1%82"><img src="https://upload.wikimedia.org/wikipedia/ru/thumb/c/c3/Morty_Smith.png/129px-Morty_Smith.png" alt="babababa" height="200px" width="100%"></a></br> Мортимер «Морти» Смит (англ. Mortimer «Morty» Smith) — один из главных героев американского комедийного мультсериала «Рик и Морти», внук Рика Санчеса, неуверенный в себе и параноидальный 14-летний подросток, ученик средней школы, образ которого основан на образе Марти Макфлая из научно-фантастической трилогии «Назад в будущее»
            </div>
        </div>
    </div></span>
    </br>
    ???
    </br>
    PROFIT
    </br>
  </p>

</body>

</html>

1 个回答

Voted

NDMX · Answer 1 · 2022-07-25T08:59:17Z

为什么要重复问题？

我在您上一个问题的回答中解决了您的所有问题，甚至附上了解决方案的代码，请仔细查看：

HTML - 通过工具提示显示的文本

在我的解决方案中：

当文本在侧面时，工具提示不会跳出窗口。
工具提示相对于触发它的短语的中心定位（仅当触发工具提示的文本不在屏幕边缘时）。
在我的解决方案中，如果鼠标移到触发此工具提示的文本之外或工具提示本身之外，工具提示就会消失。您可以按照自己的方式进行操作，但在这种情况下，如果用户永远无法单击它，为什么还需要此工具提示中的链接？

这是代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .textAndTooltip {
            position: relative;
        }
        
        .textAndTooltip__tooltip {
            display: none;
        }
        
        .textAndTooltip__text {
            cursor: pointer;
            white-space: nowrap;
        }
        
        .textAndTooltip__text:hover + .textAndTooltip__tooltip {
            display: block;
            animation: UpToDown .3s ease;
            animation-fill-mode: forwards;
        }
        
        .textAndTooltip__tooltip:hover {
            display: block;
            animation: UpToDown .3s ease;
            animation-fill-mode: forwards;
        }
        
        @keyframes UpToDown {
            0% {
                opacity: 0;
                top: 0;
            }
            100% {
                opacity: 1;
                top: 1em;
            }
        }
        
        .tooltip {
            position: absolute;
            top: 1em;
            left: 50%;
            transform: translate(-50%, 0);
            max-width: 300px;
            min-width: 200px;
            background-color: #3989c9;
            padding: .5em;
            text-align: center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            color: white;
            z-index: 2;
        }
        
        .tooltip_right {
            left: auto;
            right: 0;
            transform: translate(0, 0);
        }
        
        .tooltip_left {
            left: 0;
            right: auto;
            transform: translate(0, 0);
        }
    </style>
    <title>Online HTML Editor</title>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque rem tempora cum impedit commodi. Voluptas accusantium recusandae dolores, officia quasi. <span class="textAndTooltip"><strong class="textAndTooltip__text">Текст.</strong><span class="textAndTooltip__tooltip tooltip"><a class="tooltip__img" href="https://clck.ru/J36a7" target="_blank"><img src="https://inlnk.ru/1PnAYw" alt="babababa" width="100%"></a><span class="tooltip__text">Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.</span></span></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, fugiat vel dolores error. Sit velit aliquid, corporis. Atque, quasi? Rerum. <span class="textAndTooltip"><strong class="textAndTooltip__text">Текст.</strong><span class="textAndTooltip__tooltip tooltip"><a class="tooltip__img" href="https://inlnk.ru/0QXYjE" target="_blank"><img src="https://inlnk.ru/ND5PAp" alt="babababa" width="100%"></a><span class="tooltip__text">«Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.</span></span></span></p>
</body>
<script>
    function getCoords(elem) {
        let box = elem.getBoundingClientRect();

        return {
            top: box.top + window.pageYOffset,
            right: box.right + window.pageXOffset,
            bottom: box.bottom + window.pageYOffset,
            left: box.left + window.pageXOffset
        };
    }
    
    let textAndTooltip = document.getElementsByClassName('textAndTooltip');
    let tooltip = document.getElementsByClassName('tooltip');
    let tooltipPositionOk = [];
    
    for (let i=0; i<textAndTooltip.length; i++) {
        tooltipPositionOk[i] = false;
        
        textAndTooltip[i].addEventListener('mouseover', function() {
            newPositionTooltip(i);
        });
    }
    
    function newPositionTooltip(i) {
        if (!tooltipPositionOk[i]) {
            tooltipPositionOk[i] = true;
        } else {
            return;
        }
        
        tooltip[i].classList.remove('tooltip_left', 'tooltip_right');
        
        console.log(tooltip[i]);
        
        if (getCoords(tooltip[i]).left < 0) {
            tooltip[i].classList.add('tooltip_left');
        } else if (getCoords(tooltip[i]).right > document.documentElement.clientWidth) {
            tooltip[i].classList.add('tooltip_right');
            
        }
    }
    
    window.addEventListener('resize', function(){
        for (let i=0; i<textAndTooltip.length; i++) {
            tooltipPositionOk[i] = false;
        }
    });
</script>

</html>

HTML - 工具提示定位

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

HTML - 工具提示定位

1 个回答

相关问题