Display tooltip when container overflow is hidden

后端 未结 2 1630
忘了有多久
忘了有多久 2020-12-15 20:13

Is there a way, preferably without js, to position and display a tooltip above a container, when the container must have overflow:hidden, without the tooltip be

2条回答
  •  攒了一身酷
    2020-12-15 20:30

    now i used position absolute to fixed for the tooltip, check it now

    .container {  
      position: relative;
      overflow:hidden;
      margin: auto;
      width: 50%;
      border: 3px solid green;
      padding: 10px;
      height: 70px;
      background: lightblue;
      text-align: center;
      z-index:9;
    }
    a.tooltips {
      position: relative;
      display: block;
    }
    a.tooltips span {
      position: fixed;
      width: 140px;
      color: #FFFFFF;
      background: #000000;
      height: 96px;
      line-height: 96px;
      text-align: center;
      visibility: hidden;
      border-radius: 8px;
      z-index:9999;
      top:15px;
      box-shadow: 4px 3px 10px #800000;
    }
    a.tooltips span:after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -8px;
      width: 0;
      height: 0;
      border-bottom: 8px solid #000000;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
    }
    a:hover.tooltips span {
      visibility: visible;
      opacity: 0.7;
      top: 40px;
      left: 50%;
      margin-left: -76px;
      z-index: 999;
    }

提交回复
热议问题