如何隐藏工具提示？

Question

我使用css创建工具提示，顺序放置4个工具提示，第2个工具提示出现在第1个工具提示的弹出内容

以下代码放在liferay的jsp文件之间，每个jsp文件中都有工具提示代码。如果我打开第一个工具提示，其他工具提示会出现在第一个工具提示的弹出内容中，

我需要显示弹出内容而不会中断。我该怎么做？

我的代码是

    .help-tip {
          position: absolute;
          top: 34px;
          right: 120px;
          text-align: center;
          background-color: #a3c2c2;
          border-radius: 50%;
          width: 14px;
          height: 10px;
          font-size: 10px;
          line-height: 16px;
          cursor: default;
        }
        .help-tip:before {
          content: '?';
          font-weight: normal;
          font-size: 10px;
          color: #fff;
        }
        .help-tip:hover p {
          display: block;
          transform-origin: 100% 0%;
          -webkit-animation: fadeIn 0.3s ease-in-out;
          animation: fadeIn 0.3s ease-in-out;
        }
        .help-tip p {
          /* The tooltip */
          display: none;
          text-align: center;
          /*background-color: #a3c2c2;*/
          padding: 5px;
          width: 170px;
          position: absolute;
          border-radius: 6px;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
          right: -100px;
          /*color: #000000;*/
          font-size: 14px;
          line-height: 1.4;
          color: #000000;
          background: #FBF5E6;
          background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF);
          background: linear-gradient(top, #FBF5E6, #FFFFFF);
          border: 1px solid #CFB57C;
        }
        .help-tip p:before {
          /* The pointer of the tooltip */
          position: absolute;
          content: '';
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-bottom-color: #66ccff;
          right: 100px;
          top: -12px;
        }
        .help-tip p:after {
          /* Prevents the tooltip from being hidden */
          width: 100%;
          height: 40px;
          content: '';
          position: absolute;
          top: -40px;
          left: 0;
        }
        /* CSS animation */
        @-webkit-keyframes fadeIn {
          0% {
            opacity: 0;
            transform: scale(0.6);
          }
          100% {
            opacity: 100%;
            transform: scale(1);
          }
        }
        @keyframes fadeIn {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 100%;
          }
        }  

    <div class="help-tip">
      <p>This is the inline edit help tip!</p>
    </div>

Answer 1

由于每个工具提示使用完全相同的代码，因此每个工具提示都将具有CSS属性position: absolute;，这可能会导致问题。尝试将所有position更改为relative。