Question

我将http://www.menucool.com/tooltip/css-tooltip和http://cssarrowplease.com/组合在一起创建了一个纯css弹出窗口。当你将鼠标悬停在＃34; John Smith＆＃34;上时，会出现一个弹出窗口。您可以在http://codepen.io/kikibres/pen/MwEgQX看到此代码。

然而，我遇到了问题。我想保留页面右侧的所有内容，但仍留在容器中。我尝试通过从.quotename中删除<input type="text" data-required="1"> <script type="text/javascript"> // submit button event $('#form-submit-btn').click(function(event) { // set required attribute based on data attribute $(':input[data-required]').attr('required','true'); // since required attribute were not set (before this event), prevent form submission if(!$('#form')[0].checkValidity()) return; // submit form if form is valid $('#form').submit(); }); </script>来编辑它。删除后，弹出窗口工作，然而，它已超出范围。添加代码时，代码处于绑定状态，但弹出窗口不起作用，因为它溢出了边界。我该如何解决？

HTML

"overflow: hidden; height: auto;"

CSS

<div class="testimonials">
        <div class="container">
            <div class="quotename">
                <a href="#" class="tooltip">
                <span><h3>Mini profile</h3>Lorem ipsum dolor sit amet, consect etur adipiscing elit.</span>
                <h2>John Smith</h2></a>
            </div>
        </div>
    </div>

这是弹出窗口可以运行的代码，但一切都超出了界限。您还可以看到第二个代码，其中所有内容都已绑定但弹出窗口不在http://codepen.io/kikibres/pen/BNwaGq。请确保没有涉及Javascript。

我还做了一些消除方法，发现a.tooltip span和a.tooltip h2中的浮点数也会影响代码，因为使用浮点数可以使内容超出界限或类似的内容。

更新 -
我认为问题在于a.tooltip h2。如果我从课堂上移除浮动：除了100％宽的底部边框外，一切都有效。我使用Is it possible to extend a h2 box in CSS depending on the text within it?中的代码来解决这个问题，因为我想在下划线和文本之间留出空间，但显然，该代码正在影响整个事情。新代码位于http://codepen.io/kikibres/pen/RPLwmy

Answer 1

从此课程[R|t]，Demo

中删除margin-top

纯Css Popup和Container保证金

1 个答案: