我能用WordPress制作简单的全局工具提示吗？

时间：2011-06-26 作者：Simco

我们希望Wordpress站点中的所有外部链接都有一个简单的鼠标悬停工具提示，而不必在其中放置标题标记、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>

任何对此的帮助都将不胜感激！

2 个回复

SO网友:Rarst

如果您的代码一般都在工作，但不在WP中，那么这很可能是由WP在无冲突模式下运行jQuery引起的。

您需要使用appropriate wrapper 像往常一样使用它（与$ 签名）。

SO网友:onetrickpony

给你：

(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 使用您的网站地址）

Thumbnails 从wordpress检索。com公司

我最初是为主题内的ping列表制作的，所以如果您对所有链接都使用此选项，最好是在鼠标悬停时创建Webshot，而不是在文档加载后直接创建。。。

结束

标签： jquery tooltip 小码农

相关推荐

来自标题标签的自动jQuery折叠

我希望这是相当容易的后作者设置一个手风琴，根据标题标签。例如：<h3>Headline 1</h3> <p>Content.. lorem ipsum</p> <h3>Headline 2</h3> <p>Content.. lorem ipsum</p> <h3>Headline 3</h3> <p>Content