Npcink Blog
切换菜单

怎么实现简单的 Tooltip 提示框？ - wordpress 开发

如果直接在文本中写就介绍的话，就很容易打乱文本整体的连贯性，这一节的 wordpress 开发就教大家如何实现简单的 Tooltip 提示框

最后更新于
本页目录6 节

在编辑大量专业的知识时我们往往需要对一些比较生僻的词汇进行解释或是对一些引用内容进行介绍，如果直接在文本中写就的话，就很容易打乱文本整体的连贯性，这一节的 WordPress 开发就教大家如何实现简单的 Tooltip 提示框。

背景图片

效果如下：

<div id="content" class="post">
    <p>在 WordPress 的文章编辑器<span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner">登鹳雀楼</span></span></span>里面只要输入<span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</span></span></span>如下格式的短代码</p>
    <p>[tooltip tip="提示内容"]</p>
  </div>
<style type="text/css">
.tooltip{
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}
.tooltip-icon{
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 1px solid #999;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: "caption", Arial;
  text-align: center;
}
.tip-content{
  z-index: 999999;
  display: none;
  position: absolute;
  left: -5px;
  bottom: 30px;
  width: 240px;
}
.tip-content-inner{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: 200px;
  padding: 10px;
  line-height: 20px;
  border: 1px solid #ccc;
  background: #fff;
  line-height: 20px;
  color: #333;
  font-size: 16px;
}
.tip-content-inner:before{
  content: "";
  position: absolute;
  left: 7px;
  bottom: -24px;
  border-style: solid solid solid solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 12px 6px;
}
.tip-content-inner:after{
  content: "";
  position: absolute;
  left: 8px;
  bottom: -20px;
  border-style: solid solid solid solid;
  border-color: #fff transparent transparent transparent;
  border-width: 10px 5px;
}
.tooltip:hover > .tip-content{
  display: block;
}
</style>

代码部署：

在主题根目录下的 functions.php 文件中的<?php下面添加以下代码：

// [tooltip tip=""]
add_shortcode('tooltip', 'shortcode_tooltip');
function shortcode_tooltip($attrs, $content = null) {
  $return = '';
  extract(shortcode_atts(array(
    'tip' => "",
  ), $attrs));
    ob_start(); ?>
    <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner"><?php echo $tip; ?></span></span></span>
    <?php
    $return = ob_get_clean();
  return $return;
}

在主题根目录下的 style.css 底部添加以下样式代码：

.tooltip{
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}
.tooltip-icon{
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 1px solid #999;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: "caption", Arial;
  text-align: center;
}
.tip-content{
  z-index: 999999;
  display: none;
  position: absolute;
  left: -5px;
  bottom: 30px;
  width: 240px;
}
.tip-content-inner{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: 200px;
  padding: 10px;
  line-height: 20px;
  border: 1px solid #ccc;
  background: #fff;
  line-height: 20px;
  color: #333;
  font-size: 16px;
}
.tip-content-inner:before{
  content: "";
  position: absolute;
  left: 7px;
  bottom: -24px;
  border-style: solid solid solid solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 12px 6px;
}
.tip-content-inner:after{
  content: "";
  position: absolute;
  left: 8px;
  bottom: -20px;
  border-style: solid solid solid solid;
  border-color: #fff transparent transparent transparent;
  border-width: 10px 5px;
}
.tooltip:hover > .tip-content{
  display: block;
}

使用：

在文章编辑器里面只要输入如下格式的短代码：

[tooltip tip=”提示内容”]

提示：

– PS0: 那个圆圈是用 css3 实现的，所以 IE8 下面会变成方框……需要支持 IE8 的朋友自己改成背景图方式吧。
– PS1: tip 内容用了 2 个容器的目的是为了让 tip 内容显示能 width:auto 效果，也就是说 .tip-content 的 width 起到 max-width 效果，然后 .tip-content-inner 就有了类似 max-width 的属性效果了

相关：

扩展：

如果你担心自己的原创内容被被轻易的复制，那么在被人复制时加一个提示会是一个不错的选择，参考这一篇 wordpres 开发教程来增添这一小功能吧。