html - img タグの代替テキストをカスタマイズする

Question

ユーザーがマウスを画像の上に置いたときにヒントを表示するには <img src="image" alt="product code 000000">

ただし、デフォルトの代替テキストは常にカーソルの右側に表示されます。表示されたミニポップアップをマウスカーソルの左に移動する方法はありますか???

更新皆さん、返信ありがとうございます。

score 1 · Accepted Answer

黄色いツールチップのことですか？できません。ただし、JavaScript を使用して独自のものを作成できます。

score 1 · Accepted Answer

ツールチップは Title 要素で、alt は画像が表示されていないときに表示されるテキストです。タイトル要素をフォーマットすることはできませんが、前述のように、カスタムツールチップを追加できます。簡単に作業を開始できるjquery UIツールチップを使用するのが好きです。

次に、CSS を変更して左側に移動することができます。

score 0 · Accepted Answer

あなたのためにそれを行うことができるJavaScriptツールチップスクリプトがたくさんあります。ちなみに、ほとんどのブラウザでは、ツールチップは alt ではなく title="" 属性に表示されます。

score 0 · Accepted Answer

いいえ、できませんが、cssおよび/またはを使用して独自のものを作成できますjavascript。

score 0 · Accepted Answer

cssでツールボックスを作成できます

img{position:relative;}
img:hover::before{
  content:attr(alt);
  position:absolute;
  left:0;
  top:0;

}

5 に答える 5