单击时如何使内容切换向下/向上滑动

Question

我有以下填充标签的 C# 代码：

specific += "</b>&nbsp;&nbsp;&nbsp;<span class='hoverText tooltip' title='" + this.Server.HtmlEncode(r["MessageText"].ToString()) + "'>" + strTemp + "...</span>";

lblMessage.Text = specific;

在一个 asp.net 标签中可以有多个上述条目。

输出是这样的：

我正在使用以下 CSS，它允许我在一个简单的弹出窗口中查看它：

.tooltip {
    /*display: inline;*/
    position: relative;
}

.tooltip:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 34px;
    color: #fff;
    content: attr(title);
    left: -35%;
    padding: 5px 15px;
    position: absolute;
    z-index: 9999999999999999;
    width: 200px;
}

.tooltip:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 30px;
    content: "";
    left: 40%;
    position: absolute;
    z-index: 9999999999999998;
}

显示以下内容：

问题在于，X&Y 不是动态的，有时会脱离页面。

有没有办法添加JQuery/JavaScript，这将允许用户点击MessageText和折叠的跨度展开以显示全文或再次点击时折叠。

这是显示内容的DIV：

<div id="slideContent">
    <div style="width: 98%; margin: 0 auto; padding: 5px;">
        <div id="dvImpMsgs" style="padding-left: 10px; padding-right: 10px;">
            <asp:UpdatePanel runat="server" ID="upMessage" ClientIDMode="Static" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lblMessage" Font-Size="x-small" runat="server" Text="" ClientIDMode="Static"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

CSS：

#slideContent {
    background: #E4EEF6;
    width: 289px;
    padding: 0 0 0 0px;
    float: right;
    color: #000000;
    border-left: 1px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
}

Answer 1

在这里我给你一个建议：

在 tooltip:hover 上显示消息中的所有文本。
当它不悬停时，只显示第一行文本。 添加了一些样式，使其看起来更现代一些。

.container {
  padding: 5px;
  width: 250px;
  background-color: LightBlue;
  
}
.container label {
  display: block;
  border-bottom: 1px solid black;
  background-color: rgba(50, 50, 50, 0.9);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top: 5px;
  padding: 2px;
  color: silver;
  font-weight: bold;
  text-indent: 6px;
}
.tooltip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 5px;
}
.tooltip:hover {
  font-size: 1.2em;
  white-space: normal;
  text-overflow: clip;
  background: #333;
  background: rgba(0, 0, 0, .9);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  color: white;
  padding: 5px;
}

<div class="container">
  <label> User1 12:12 :</label>
  <span class="tooltip">Lorem ipsum dollar si amet trempa tri uipo reti deruf truter strifu</span>
  <label>User 2 12:34 :</label>
  <span class="tooltip">Ipsum dollar si amet trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">Dollar si amet trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">si amet trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">tri uipo reti deruf truter strifu</span>
  <span class="tooltip">Lorem ipsum dollar si amet trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">Lorem ipsum dollar si amet trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">Lorem ipsum dollar si amet trempa tri uipo reti deruf truter strifu</span>
  <span class="tooltip">Lorem ipsum dollar si amet trempa tri uipo reti deruf truter strifu</span>
</div>