私はいくつかのUIコンポーネントを表示するためにキャンバスを使用しています。各コンポーネントのヘルプを表示するようにcanvas.titleを設定しています。マウスの移動後にツールチップを表示する方法
...
if(mouse.y >= y && mouse.y <= y + w && mouse.over){
if(currentId !== tool.id){
canvas.title = tool.help;
}
currentId = tool.id;
...
問題は、マウスが移動したときにツールヒントが隠されていることであると私はマウスを移動して、キャンバスに戻って移動するまでを再表示することはありません。
canvas要素を離れることなく別のUIコンポーネントにカーソルを合わせると、ツールチップが再び表示されるように動作を変更したいと思いますか？
は、より多くの自由とコントロールを提供します。
これは簡単な例ですhttp://jsfiddle.net/mynetx/5qbP3/ ここからアイディアを取ってビルドすることができます。もう一つの利点は、あなたのような場合に助けを提供したいCSSのコントロールです。
window.addEventListener("load", function() {
var couponcodes = document.getElementsByClassName("couponcode");
for (var i = 0; i < couponcodes.length; i++) {
couponcodes[i].addEventListener("mouseover", function() {
var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
coupontooltip.removeAttribute("style");
});
couponcodes[i].addEventListener("mouseout", function() {
var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
coupontooltip.style.display = "none";
});
} });
ツールチップはブラウザが実行されるシステムの一部です。悲しいことに、JavaScriptからはアクセスできません。
非常に難しい（キャンバスと余分な要素の両方を使用する）独自のツールチップを実装することをおすすめします。
あなたが心配している場合は、アクセシビリティ、それが要素に「ツールチップ」の役割を与えることが可能です：カスタムツールチップを実装http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
fabric.jsを使用できます。 thisを参照してください。
Hmmm ...ちょうどネイティブのツールチップ - div-show-on-mouse-eventを使用したカスタムツールチップは使用できませんか？見てみましょう：1.あなたはすでにタイトルを変更しようとしました。 2.「htmlツールチップの表示設定」が存在しないようです。 3.手動でマウスオーバー/マウスを動かすことはできません。4.キャンバスの非表示と再表示は機能しません。 5.キャンバスをポジションで一時的に再配置する：絶対パスは機能しません。私はあきらめる...答えは何ですか？ – markE
@markE答えは？私が知っていたと思って、それが "いいえ..できない！"ではないことを望んでいた試していないのはイベントトリガーだけです。私が何か答えを受け入れる前にそれを試してください。 – Blindman67
私は本当にあなたが答えを自己投稿すると思っていました。 :-)私は起こりそうな出来事を誘発しようとしました...運がない。おそらく、CSSの視認性、位置などを変更することと組み合わせてイベントを起こすのですが、私はうまくいかないでしょうか？ちょっと不思議なことに...典型的な（そしてよりカスタマイズ可能な）div-show-on-mouse-eventタイプのツールチップを使用してみませんか？ – markE