在按钮下

Question

我是 HTML 和 CSS 的新手，正在尝试在本教程的按钮下创建弹出窗口 - [操作方法 - 弹出窗口][1]。
我尝试更改位置、显示和其他属性，但没有用。

CSS

.popup {
    position: relative;
    display: inline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        height: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

HTML

<button class="popup" onclick="popupShow()"> Calendar
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>

JavaScript

const popupShow = () => {
    const popup = document.querySelector("#myPopup");
    popup.classList.toggle("show");
}

Answer 1

你去而不是使用 bottom:125% 使用 pixel 值

另外不要忘记工具提示 position 及其 border-width

编辑：调整了弹出窗口的高度以获得良好的视图

const popupShow = () => {
        const popup = document.querySelector("#myPopup");
        popup.classList.toggle("show");
    }

.popup {
        position: relative;
        display: inline;
        left:50%;
        margin-top:35px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
        .popup .popuptext {
            visibility: hidden;
            width: 160px;
            height: 60px;
            background-color: #555;
            color: #fff;
            display:inline-block;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            /*bottom: 125%;*/
            left: 0px;
            /*margin-left: -80px;*/
            bottom: -85px;
        }
    
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: -5px;
            left: 50%;
            margin-left: -5px;
            border-width: 0 5px 5px 5px;
            border-style: solid;
            border-color: #555 transparent;
        }
    
        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }

<button class="popup" onclick="popupShow()"> Calendar
        <span class="popuptext" id="myPopup">A Simple Popup!</span>
    </button>

Answer 2

你当前所有的东西都可以正常工作，但是如果你只渲染按钮和弹出窗口而没有任何其他样式，你会发现绝对定位的弹出窗口显示在屏幕外（因为它是绝对定位的）我添加了一些主体样式来显示屏幕中央的弹出窗口。

我也误解了你的问题，认为你想要在底部显示弹出窗口，所以它看起来与你的示例略有不同，但原理仍然相同。

const popupShow = () => {
    const popup = document.querySelector("#myPopup");
    popup.classList.toggle("show");
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100vh;
}
.popup {
    position: relative;
    display: inline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        height: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        top:calc(100% + 8px);
        left: 50%;
        margin-left: -80px;
    }

    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555   transparent ;
    }

    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

<button class="popup" onclick="popupShow()"> Calendar
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
</button>

Answer 3

我稍微改变了你的CSS。请参阅带有 /*changed*/.

的行

const popupShow = () => {
  const popup = document.querySelector("#myPopup");
  popup.classList.toggle("show");
}

.popup {
  position: relative;
  display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 50px; /*add*/
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  height: auto; /*changed*/
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: -40px; /*changed*/
  left: 50%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: -32%; /*changed*/
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /*changed*/
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

<button class="popup" onclick="popupShow()"> Calendar
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
 </button>

在按钮下

Under the button

html

javascript

css

popup