JavaScript工具提示帮助和颜色更改 [英] Javascript tooltip help and color change
问题描述
我对Java语言还很陌生.现在,我需要的是我的projectXYZ中有一个链接,该链接指向另一个projectABC.我需要更改链接的颜色,并为链接的MouseOver事件显示工具提示对话框.
I am fairly new with Javascript. Now, what I need is that I have a link in my projectXYZ which leads to another projectABC. I need to change the color of the link and show a tooltip dialog for the MouseOver event of the link.
我尝试更改颜色,但提示提示无法成功.是否有满足这些要求的组合解决方案?
I tried to change the color, but could not succeed with the tooltip. Is there a combined solution which fulfills these requirements ?
谢谢.
推荐答案
通常,在巡回DIV中添加一个"title"属性就足够了,并且它将作为鼠标悬停时的工具提示显示.
Usually it is said to be sufficient to add a 'title' attribute in tour DIV's and it will show up as tooltip on mouse-hover.
但是要使基本的工具提示正确定位,可以使用以下内容.我已经用过了,而且有效!!!
But to make a basic tooltip with proper positioning, you can use the below. I have used it and it works !!
JS(将有两个方法,分别是showTip和hideTip):
JS (will have two mwthods, showTip and hideTip) :
<script type="text/javascript">
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+20+"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";
}
</script>
CSS:
<style type="text/css">
#myTooltip{padding: 5px; background-color: #FFF8DC; border: 1px solid #DEB887; width:180px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b6b6b; display:none; position:absolute;left:0px;top:0px; }
</style>
和HTML(在href下方将有一个额外的DIV,以显示工具提示):
And the HTML (will have an extra DIV below the href to show tooltip):
<a href="javascript:void(0)" onmouseover="showtip(event, 'Sample tooltip text');"
onmouseout="hidetip();">Hover mouse to see tooltip text.</a>
<div id="myTooltip" ></div>
希望有帮助!
这篇关于JavaScript工具提示帮助和颜色更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!