Question

我希望能够在工具提示中显示HTML元素的上下文。我不确定我做错了什么。理想情况下，我希望在我的工具提示中看到 test 。但这不会发生。

我们不在代码库中使用jQuery，所以我不能使用任何jQuery插件。但是我们会在需要时编写JavaScript代码。我的设置如下：

我的div如下：

<div class="tooltip message">test</div>

我的CSS设置：

.tooltip {
    display: inline;
    position: relative;
}
.tooltip.message:before {
    background: #333;
    background: rgba(0, 0, 0, .8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    box-sizing: border-box;
}
.tooltip.message:after {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;
}

我的小提琴在这里： http://jsfiddle.net/7LNJc/3/

Answer 1

为您的class='tooltip message'提供ID，例如：

<div class='tooltip message' id='test'>test</div>

查看以下内容：

var doc = document;
function E(e){
  return doc.getElementById(e);
}

现在E('test')与document.getElementById('id')相同，所以你再也不需要它了;

var test = E('test').innerHTML; // holds the html

如果元素具有value属性，就像输入一样，那么你会这样做：

var test = E('test').value; // holds the html value attribute

要指定新的innerHTML或value，就像：

var test = E('test');
test.innerHTML = 'some text';

或

test.value = 'some value';

你甚至可以这样做：

E('test').innerHTML = 'some text';

Answer 2

目前尚不清楚使用自定义工具提示行为对您来说是否重要，而不是HTML中已有的默认工具提示功能。如果不需要自定义工具提示，那么您可以使用title属性生成工具提示，而不是诉诸JavaScript：

<div class="tooltip message" title="test">test</div>

Answer 3

在div元素上尝试CSS：hover选择器，而不是由属性title指定的工具提示。它提供了一种视觉上的工具。

div.tooltip {
  color: #ffffff;
}

div.tooltip:hover {
  border: 1px solid #000000;
  background-color: yellow;
  color: #000000;
}

如何在不使用jQuery的情况下在工具提示中显示div标签的文本内容？

3 个答案: