Question

似乎我遇到了大多数人遇到的相反问题：div内有一个“工具提示”式的table，我希望它可以逃避表本身，例如元素的title可以做到：

将鼠标悬停在元素（此处为文本区域）上时，工具提示会被表格的边缘截断，但是alt文本看起来很好。内容嵌入表中以便使其可滚动。

我已经尝试piggybacking到可以弹出到表格上的现有元素上，但是无法正确理解:before和:after的语义。我还尝试过更改tooptip（以及所有其他元素）的z-index，但这并没有产生任何明显的效果。因此，我写了一个JavaScript解决方案，用div包装有问题的元素，当元素悬停在元素上时会弹出提示。看起来运行良好；现在我只需要它创建的工具提示就可以显示在其父容器之外。

我可以像提示文字一样获得工具提示吗？另外，我可以为替换文字设置样式吗？

//set fields to readonly, and then inject hovertext
function doHoverText() {
  setReadOnly("textarea");
  setReadOnly("input");
  injectHoverText("textarea");
  injectHoverText("input");
}



//set all textarea and input fields to readonly
function setReadOnly(elem_type) {
  var areas = document.getElementsByTagName(elem_type);
  for (var i = 0; i < areas.length; i++) {
    areas[i].readOnly = true;
  }
}


//wrap elements in a hovertext div, then add a hovertexttext span below them
function injectHoverText(elem_type) {
  var areas = document.getElementsByTagName(elem_type);
  for (var i = 0; i < areas.length; i++) {

    //get the original element
    var orig_elem = areas[i];

    //wrap it in a div
    var htext = document.createElement('div');
    htext.className = "hovertext";
    htext.title = orig_elem.value;
    orig_elem.parentNode.insertBefore(htext, orig_elem);
    htext.append(orig_elem);

    //add a span into the div
    var htexttext = document.createElement('span');
    htexttext.className = "hovertexttext";
    htexttext.innerHTML = orig_elem.value;
    htext.appendChild(htexttext);

  }
}

table.innerTable {
  width: 320px;
  max-width: 320px;
}

table.outerTable {
  border: thin blue ridge;
}

td {
  border: none;
  padding-left: 2px;
  padding-right: 2px;
  position: relative;
}

div.y-scroll {
  height: 120px;
  max-height: 120px;
  overflow: auto;
  position: relative;
}

textarea {
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  resize: none;
  -webkit-box-sizing: border-box;
  /* <=iOS4, <= Android  2.3 */
  -moz-box-sizing: border-box;
  /* FF1+ */
  box-sizing: border-box;
  /* Chrome, IE8, Opera, Safari 5.1*/
}

textarea:read-only,
input:read-only {
  background-color: #999999;
}

input {
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  border: 1px solid #BBBBBB;
  -webkit-box-sizing: border-box;
  /* <=iOS4, <= Android  2.3 */
  -moz-box-sizing: border-box;
  /* FF1+ */
  box-sizing: border-box;
  /* Chrome, IE8, Opera, Safari 5.1*/
}

.hovertext {
  position: relative;
  display: inline;
  height: 100%;
}

.hovertext .hovertexttext {
  visibility: hidden;
  background-color: lightgrey;
  color: black;
  text-align: left;
  white-space: pre-line;
  font-family: arial;
  font-size: 14px;
  font-weight: normal;
  padding: 4px 6px;
  border-radius: 6px;
  left: 0%;
  bottom: 0%;
  position: absolute;
  z-index: 1;
}

.hovertext:hover .hovertexttext {
  visibility: visible;
}

<body onload="doHoverText()">
  (the table will always have plenty of space above it)
  <br><br><br><br>
  <table cellspcaing="0" cellpadding="0" class="outerTable">
    <tr>
      <td>
        <div class=y-scroll>
          <table class="innerTable">
            <tr>
              <td>
                <textarea>short text</textarea>
              </td>
              <td>
                <textarea>OH NO
^ that text
can't escape</textarea>
              </td>
            </tr>
            <tr>
              <td>
                <textarea>long
overlapping
text
issue</textarea>
              </td>
              <td>
                <input value="this isn't in a textbox, but could potentially cause the same kind of issues - specifically, those of overlap.">
              </td>
            </tr>
            <tr>
              <td>
                <textarea>does this pose an issue yet? it should, it could, it might.</textarea>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>

</body>

像替代文字一样使工具提示转义

0 个答案: