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

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

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

怎么实现简单的Tooltip提示框? - wordpress开发
背景图片

效果如下:

在 WordPress 的文章编辑器?登鹳雀楼里面只要输入?白日依山尽,黄河入海流。欲穷千里目,更上一层楼。如下格式的短代码

[tooltip tip="提示内容"]

代码部署:

在主题根目录下的 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 的属性效果了

相关:

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

怎么添加Tooltip提示框? - css笔记

扩展:

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

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

怎么在复制文字时展示提示框? - WordPress教程

默认分类

精彩的引导卡片 - WordPress区块

2020-2-18 22:56:00

Shapely – 一页WordPress主题

2019-10-19 7:57:40

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索