1

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

我们的代码库中没有使用 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/

4

3 回答 3

0

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

div.tooltip {
  color: #ffffff;
}

div.tooltip:hover {
  border: 1px solid #000000;
  background-color: yellow;
  color: #000000;
}
于 2013-11-15T01:08:01.350 回答
0

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

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

于 2013-11-15T01:05:40.010 回答
0

给你class='tooltip message'一个 id，比如：

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

查看以下内容：

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

NowE('test')与 相同document.getElementById('id')，因此您不再需要它；

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

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

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

要分配 newinnerHTML或 a value，就像：

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

或者

test.value = 'some value';

你甚至可以这样做：

E('test').innerHTML = 'some text';
于 2013-11-15T01:04:19.580 回答