Magentoのプロトタイプまたはスクリプトを含むツールチップ

Question

MagentoのWebサイトでツールチップに問題があります.HTML UL Listが表示される製品ページにツールチップが1つ必要です。私が見つけたいくつかのプラグインを試しましたが、JQueryに問題がありました。これは、製品ページにある他のプロトタイプのポップアップを無効にしていたためです。

私は本当に初心者のすべての種類のjavascriptとあなたがこれで私を助けてくれることを願っています。

ツールチップのための私のトリガIDは、なぜツー買うCSSで とツールチップのクラス＃ですが

.why・ツー・購入・ツールチップで誰も私に示すことができるシンプルなツールチップを駆動し、プロトタイプやScriptaculousのをお勧めすることができますHTMLお願いしますか？

何か助けが歓迎されています。 ありがとうございます。

Answer 1

通常、これはCSSで行うことができます。まず、アンカーが必要です。

<a id="why-to-buy" href="#" onclick="return false;"> 
    Why To Buy? 
    <ul class="why-to-buy-tooltip"> 
     <li>Reason #1</li> 
     <li>Reason #2</li> 
    </ul> 
</a> 

onclickはハイパーリンクとして機能しないようにすることです。古いIEが次のホバーを尊重するためにはアンカーが必要です。

#why-to-buy { 
    position: relative; 
} 

#why-to-buy .why-to-buy-tooltip { 
    display: none; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    z-index: 100; 
} 

#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip { 
    display: block; 
} 

「CSSポップアップ」についての詳細情報の検索と閲覧が必要な場合は、 CSS3トランジションを追加するのもいいことです。古いブラウザでは無視され、引き続き正常に動作します。

---

このタイプのポップアップはアンカーの内側にあり、アンカーにはアンカーが含まれていないため、このタイプのポップアップには制限があります。 #why-to-buy要素がDIVのような別の型である場合、IEは:hover疑似クラスを受け取りません。この特殊なケースでは、結局のところJavaScriptが少し必要です。

$('why-to-buy').observe('mouseenter', function() { 
    this.addClassName('over'); 
}).observe('mouseleave', function() { 
    this.removeClassName('over'); 
}); 

#why-to-buy.over .why-to-buy-tooltipを含む最後のスタイルシートルールを更新します。 JavaScriptのビットはめったに必要なく、/skin/frontend/base/default/js/ie6.jsに入ることができます。または、ブラウザのアップグレードを促し、古いIEをまったくサポートしないことを選択できます。

Answer 2

迅速Googleは、このいずれかを返さ検索、およびHTMLをサポートするために示しています

http://www.nickstakenburg.com/projects/prototip/

それはとてもベースのプロトタイプは、Magentoのとうまく動作するはずです。