Question

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

但我遇到的问题是，如果我将文本更改为长或短的弹出文件仍然保留在同一位置，我可以定位它，我希望它可以定位在＆＃34; *＆＃34;无论文本长度如何（在本例中：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>

它给了我这个结果，但是如果尝试将文本更改为＆＃34;在4小时内就绪＆＃34; ，弹出窗口仍然保持在同一位置，而我希望它超过＆＃34; ＆＃34;

非常感谢您的帮助

Answer 1

如果您的“*”始终位于文本的末尾，则可以像这样解决：（请参阅我在CSS中的评论）。

<div class="container">
    <!--Just a bunch of br element to place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution-->
    <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>

</div>



<style>
    .bopis-messaging {
        margin-top: 300px; /*place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution*/
        position: relative;
        display: inline-block; /* Important so that the container will dynamically fit to the size of the content */
    }
    .bopis-msg-content {
        width: 180px;
        border: 1px solid #333;
        position: absolute;
        left: 100%; /*Place it at the end of the parent element */
        margin-left: -116px; /*half of width (this also includes the padding) to place the box back so its at the center of the "*" NB*/
        bottom: 200%; /*Place it above */
        height: auto;
        background: #ffffff;
        color: #333333;
        font-family: Lato;
        font-size: 12px;
        line-height: 20px;
        padding: 16px;
    }

/*Added a triangle:*/
    .bopis-msg-content:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -10px;
        width: 0;
        height: 0;
        border-top: solid 15px #000;
        border-left: solid 15px transparent;
        border-right: solid 15px transparent;
    }

</style>

Answer 2

一个不错的方法是在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>

Answer 3

这是jsfiddle看看。

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

CSS

    .bopis-messaging {
       position: relative;
       margin-top: 150px;
       display: inline-block;
    }
    .bopis-msg-content {
     width: 180px;
     border: 1px solid #333;
     position: absolute;
     right: -100px;
     bottom: 150%;
     height: auto;
     background: #ffffff;
     color: #333333;    
     font-family: Lato; 
     font-size: 12px;   
     line-height: 20px;
     padding: 16px;
   }

Answer 4

试试这个

＆＃13;

.bopis-messaging {
    position: relative;
    display: inline-block;
}
.margin-top-200 {
    margin-top:200px;
}
.bopis-msg-content {
    width: 180px;
    border: 1px solid #333;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    background: #ffffff;
    color: #333333;
    font-family: Lato;
    font-size: 12px;
    line-height: 20px;
    padding: 16px;
}

＆＃13;

<div class="margin-top-200"></div>
<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>

＆＃13;

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

4 个答案: