javascript - Javascript ツールチップのヘルプと色の変更

Question

私はJavascriptにかなり慣れていません。今、私が必要としているのは、私の projectXYZ に別の projectABC につながるリンクがあることです。リンクの色を変更し、リンクの MouseOver イベントのツールヒント ダイアログを表示する必要があります。

色を変更しようとしましたが、ツールチップで成功しませんでした。これらの要件を満たす複合ソリューションはありますか?

前もって感謝します。

Answer 1

通常、ツアー DIV に「タイトル」属性を追加するだけで十分であると言われています。これは、マウス ホバー時にツールチップとして表示されます。

ただし、適切な配置で基本的なツールチップを作成するには、以下を使用できます。私はそれを使用しましたが、動作します!!

JS (showTip と hideTip の 2 つの mwthod があります):

<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 があります):

<a href="javascript:void(0)" onmouseover="showtip(event, 'Sample tooltip text');"
onmouseout="hidetip();">Hover mouse to see tooltip text.</a>
<div id="myTooltip" ></div>

それが役に立てば幸い ！！