web-dev-qa-db-ja.com

Wordpressで簡単なグローバルツールチップを作成できますか？

Wordpressサイト内のすべての外部リンクに、titleタグやrelタグまたはclassタグを配置しなくても、単純なマウスオーバーツールチップを使用することを望みます。私は$（ 'a [href = http]'）セレクタを使っていくつかの方法を試してみましたが、私の生活のために何かを働かせることはできません。

これは私が思い付いたコードで、標準のHTMLページでは機能しますが、Wordpressでは機能しません。理論的にはこれはとても単純に聞こえます：すべての外部リンクを見つけてマウスを重ねるとこのツールチップテキストが表示されます。

<script type="text/javascript">
$(document).ready(function() {

var changeTooltipPosition = function(event) {
  var tooltipX = event.pageX - 8;
  var tooltipY = event.pageY + 8;
  $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

var showTooltip = function(event) {
  $('div.tooltip').remove();
  $('<div class="tooltip">Clicking this link will exit this site.</div>')
        .appendTo('body');
  changeTooltipPosition(event);
};

var hideTooltip = function() {
   $('div.tooltip').remove();
};

$('a[href*=http]').bind({
   mousemove : changeTooltipPosition,
   mouseenter : showTooltip,
   mouseleave: hideTooltip
});
});</script>

これを手助けすることは信じられないほど感謝されるでしょう！

jquerytooltip
1
Simco

あなたのコードが一般的には動作していてもWPで動作していない場合、これはおそらくjQueryが競合なしモードでWPによって実行されていることが原因です。

いつものように使うには 適切なラッパー を使う必要があります（$記号付き）。

2
Rarst

どうぞ：

(function($){
  $.fn.tips = function(){
    return this.each(function(i){
      var title = $(this).attr('title'),
          url = 'http://s.wordpress.com/mshots/v1/' + encodeURIComponent($(this).attr('href')) + '?w=400',
          message = 'By clicking this you are leaving my website :(',
          webshot = $('<div><p>' + message + '</p><img src="' + url + '" width="400" alt="' + title + '" /></div>').css({
            position: 'absolute',
            left: -20000,
            textAlign: 'center',
            color: '#ffffff',
            backgroundColor: 'rgba(0,0,0, 0.4)',
            padding: 10,
            zIndex: 40
          }).hide().appendTo(document.body);

      return $(this).mouseover(function(){
        webshot.show();
      }).mousemove(function(kmouse){
        webshot.css({
          left: kmouse.pageX + 15,
          top: kmouse.pageY + 15
        });
      }).mouseout(function(){
        webshot.hide();
      });

    });

  };

})(jQuery);

jQuery(document).ready(function($){ 
  // all links except the ones which reference starts with # or http://localhost
  $('a:not([href^="http://localhost"], [href^="#"])').tips();
});

（あなたのサイトアドレスでlocalhostを変更してください）

サムネイル はwordpress.comから取得されます。

私はもともとこれをテーマ内のpingリスト用に作成したので、すべてのリンクにこれを使用している場合は、ドキュメントが読み込まれた直後ではなく、マウスオーバーでWebショットを作成することをお勧めします。

1
onetrickpony