0

我想知道是否可以更改“测试”的背景颜色或颜色文本，如下图所示：

测试

我尝试使用工具提示，但它不起作用。我正在使用动态表，例如：

td = tr.insertCell();
td.innerText = whatever;
td.title = whatever;

使用工具提示，它只是记录的第一个数据。所以，我正在使用“标题”属性，它正在处理数据，但我无法编辑标题。

我尝试更改 CSS，但没有成功。

4

1 回答 1

0

检查这是添加新工具提示的一种方式。

https://stackoverflow.com/a/14600959/2226796

这是一个示例代码。

HTML：

<div class="nToolTip" title="title 1">text1</div>
<table border="1" class="nToolTipContainer">
    <tr>
        <td title="sstt1">some text 1</td>
        <td title="sstt2">some text 2</td>
        <td title="sstt3">some text 3</td>
    </tr>
    <tr>
        <td title="sstt11">some text 11</td>
        <td title="sstt12">some text 12</td>
        <td title="sstt13">some text 13</td>
    </tr>
</table>

<div id="myTooltip">w</div>

JS：

var tm='';
var ntm='';
var E;
/* , nToolTipContainer [title] */
    $('.nToolTip[title] , .nToolTipContainer [title]').mouseover(function (e) {
        var $this = $(this);
        var title=$this.attr('title');
        $this.data('title', title);
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
        ntm=title;
        E=e;
        tm=setTimeout(function(){
            showtip(E,ntm);
        },1000);//time that you want to hold your mouse on titles to apear
    }).mouseout(function () {
        var $this = $(this);
        $this.attr('title', $this.data('title'));
        hidetip();
    });
function showtip(e,message) {
var x=0;
var y=0;
var m;
var h;
if(!e)
var e=window.event;
if(e.pageX||e.pageY) { x=e.pageX;  y=e.pageY;  }
else if(e.clientX||e.clientY)
{ x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;}
m=document.getElementById('myTooltip');
if((y>10)&&(y<450))
{  m.style.top=y-4+"px";  }
else{  m.style.top=y+4+"px";  }
var messageHeigth=(message.length/20)*10+25;
if((e.clientY+messageHeigth)>510)
{  m.style.top=y-messageHeigth+"px"; }
if(x<850) { m.style.left=x+5+"px";  }
else{  m.style.left=x-170+"px";  }
m.innerHTML=message;m.style.display="block";m.style.zIndex=203;
}

function hidetip(){
var m;
m=document.getElementById('myTooltip');m.style.display="none";
}

CSS：

#myTooltip{
    position:absolute;
    color:red;
    background:yellow;
}

这是链接http://jsfiddle.net/gvwgj/1/

于 2013-10-29T20:10:41.063 回答