javascript - 如何相对于包含动态文本的父 div 定位 div？

Question

我正在处理需要在点击某些文本时显示弹出消息的要求(这是一个长度可以变化的动态文本)，我正在尝试实现如下屏幕截图所示的内容。

但我面临的问题是，当我尝试定位它时，如果我将文本更改为较长或较短的内容，弹出窗口仍保留在同一位置，我希望它相对于“*”进行定位，而不管文本长度(在本例中:4 小时内准备好)

HTML:

 <div class="bopis-messaging">
   <a href="">Ready within 7 Days *</a>
     <div class="bopis-msg-content" data-layout="small">                        
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e 
           iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim 
           ad minim veniam, quis nostrud
     </div>
</div>


    <style>
    .bopis-messaging {
       position: relative
    }
    .bopis-msg-content {
     width: 180px;
     border: 1px solid #333;
     position: absolute;
     right: 30%;
     top: -23%;
     height: auto;
     background: #ffffff;
     color: #333333;    
     font-family: Lato; 
     font-size: 12px;   
     line-height: 20px;
     padding: 16px;
   }
   </style>

它给了我这个结果，但如果尝试将文本更改为“4 小时内准备好 ”，弹出窗口仍保持在相同位置，而我希望它位于“”上方.

非常感谢您的帮助

Answer 1

一个不错的方法是在您的 html 上使用数据属性，然后通过伪元素内容属性显示它们。

/*just for the SO snippet positioning*/
.bopis-messaging {
  margin: 140px;
}

/* stablishes that any anchor tag with a data-tooltip attibute
/* will be relative positioned, so the pseudo-element will be
/* absolute positioned accordingly*/
a[data-tooltip] {
  position: relative;
}

/* displays a tooltip as an absolute positioned pseudo-element, 
/* which contents are in the data-tooltip html attribute
/* starts as zero-scaled for a fancy display on hover*/
a[data-tooltip]::after {
  content: attr(data-tooltip);
  display: block;
  position: absolute;
  width: 180px;
  border: 1px solid #333;
  background: #ffffff;
  color: #333333;    
  font-family: Lato; 
  font-size: 12px;   
  line-height: 20px;
  padding: 16px;
  bottom: 100%;
  right: 0;
  transform-origin:bottom;
  transform: translate(50%, 0) scale(0);
  transition: transform 200ms ease-out;
}

/*reveals the tooltip on hover*/
a[data-tooltip]:hover::after {
  transform: translate(50%, 0) scale(1);
}

<div class="bopis-messaging">
   <a href="" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud">Ready within 7 Days *</a>
   <br>
   <a href="" data-tooltip="shorter lorem ipsum is shorter">longer text is longer is longer is longer *</a>
   <br>
   <a href="" data-tooltip="shorter lorem ipsum is shorter">short text *</a>   
</div>

---

编辑:由于您指定了额外的要求，这里有一个隐藏 div 的版本，因为 CSS 伪元素“content”不会从数据属性解析 HTML

/*just for SO snippet positioning*/

.bopis-messaging {
  margin:170px;  
}

.bopis-hoverable{
  position:relative;
  display:inline;
}


/* displays a tooltip as an absolute positioned element, 
/* starts as zero-scaled for a fancy display on hover*/
.bopis-msg-content {
  display: block;
  position: absolute;
  width: 230px;
  border: 1px solid #333;
  background: #ffffff;
  color: #333333;    
  font-family: Lato; 
  font-size: 12px;   
  line-height: 20px;
  padding: 10px;
  bottom: 100%;
  right: 0;
  transform-origin:bottom;
  transform: translate(50%, 0) scale(0);
  transition: transform 200ms ease-out;
}

/*reveals the tooltip on hover*/
.bopis-hoverable:hover > .bopis-msg-content{
  transform: translate(50%, 0) scale(1);
}

<div class="bopis-messaging">
   <div class="bopis-hoverable">
     <a href="#">Ready within 7 Days *</a>
     <div class="bopis-msg-content" data-layout="small">                        <h4>Ready within 7 Days</h4>
      <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod <br> ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud</p>
     </div>
   </div>
</div>