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

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

innerHTMLnewまたは 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 に答える
0

既に HTML に含まれている既定のツールヒント機能ではなく、カスタム ツールヒントの動作を使用することが重要かどうかは明確ではありません。カスタム ツールチップが必要ない場合は、title属性を使用して、JavaScript に頼らずにツールチップを生成できます。

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

于 2013-11-15T01:05:40.010 に答える
0

attribute で指定されたツールチップの代わりに、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 に答える