使用时候有问题，请与我联系，谢谢。
代码随便使用
/*!
* fPopover.js v1.0.0
* (c) 2017 Talent
* Date: 2017-03-29
* Support Broswer: IE9+ Firefox12+ Chrome4+ safair4+ Opera11.5+
*/
/**
* @Other:for my girl friend:Fang Hong
*/
/**
* 参数：option:
* {
* s：需要popover依附的元素(选择器) 必须有
* x: popover在x轴上的位置（相对于目标元素,可无） 值有：left center right n(n表示占百分之几不支持 px 默认为center) 以三角形的角尖作为定位的主体
* y: popover在y轴上的位置（相对于目标元素,可无） 值有：top bottom（默认为top 即在目标元素的上方）
* content: 展现在popover上的内容 字符串（html的字符串）
* before:在popover生成后，需要执行的方法（必须是方法）
* }
* option可以只传入选择器（option为字符串）但是此使用方法必须在已经初始化之后，否则将直接抛错 不会执行之前的before操作
*
* functionName: 需要执行的popover方法的名字（可无） 值有： show hidden destroy 默认为show 当未初始化的时候，functionName就是show 其余无效
*/
/**
* 备注：getBoundingClientRect 中top left 是距离<视口>顶部 左边的距离
*/
/**
* 使用方法 如下
*/
var option = {
s: "#public",
x: 'center',
y: 'bottom',
content: "<div><span>11111</span><div>2222</div></div>"
}
//当不是初始化的时候 可以如此：option = "#public"
fPopover(option,'show');
function fPopover(option, functionName) {
"use strict"
var type = 0; //0表示option为对象的模式 1表示option为字符串的模式
var select //= window.$
= function (selector) {
return document.querySelector(selector);
};
//假如是字符串 则直接走已经初始化过的流程
if (option.constructor === String) {
if (select(option).fPopoverInit === undefined) throw 'fPopover has not been initialized!';
type = 1;
}
var ele = type == 0 ? select(option.s) : select(option);
var fPopoverInit = ele.fPopoverInit;
var fName = functionName === undefined ? 'show' : functionName;
var before = option.before === undefined ? function () {} : option.before;
switch (type) {
case 0:
initialize(option, ele, fPopoverInit);
before();
break;
case 1:
exist(fPopoverInit, fName);
break;
}
//执行before方法 此时主体已经加入body
function initialize(option, ele, fPopoverInit) {
var x = option.x === undefined ? 'center' : option.x.toString();
var y = option.y === undefined ? 'top' : ((option.y === 'top' || option.y === 'bottom') === true ? option.y.toString() : 'top');
var content = option.content === undefined ? '' : option.content;
if (ele === undefined) {
throw 'ele must be defined!';
}
//没有属性，表示没有初始化过popover 需要自己初始化创建
if (fPopoverInit === undefined) {
fPopoverInit = {};
//创建popover的容器
var pContiner = document.createElement('div');
//创建popover内容的容器
var pContext = document.createElement('div');;
pContext.innerHTML = content; //插入内容
//创建小三角的容器
var pTri = document.createElement('div');
if (y === 'top') {
pContiner.appendChild(pContext);
pContiner.appendChild(pTri);
} else {
pContiner.appendChild(pTri);
pContiner.appendChild(pContext);
}
var id = 'fPopover' + Math.floor(Math.random() * 100000);
pContiner.id = id;
fPopoverInit['id'] = id; //插入id值，为了之后的popover定位
document.body.appendChild(pContiner);
//如果top 则为向下的三角 如果为bottom 则是向上的三角
y === 'top' ? (pTri.className = 'fpopover-triangle fpopover-triangle-down') : (pTri.className = 'fpopover-triangle fpopover-triangle-up');
pContiner.className = 'fpopover';
pContext.className = 'fpopover-context';
//获取元素的位置信息
var matrix = ele.getBoundingClientRect();
//开始对y进行处理
if (y === 'top') { //在选择元素的上方
//确定三角形的位置
pTri.style.top = pContiner.offsetHeight + 9 + 'px';
pTri.style.left = pContiner.offsetWidth / 2 - 10 + 'px';
//定位popover的位置
var eWidth = ele.offsetWidth;
pContiner.style.top = matrix.top - pContiner.offsetHeight - 10 + document.body.scrollTop + 'px';
} else if (y === 'bottom') { //在选择元素的下方
//先确定 小三角的位置
pTri.style.top = (pTri.offsetHeight + 10) * (-1) + 'px';
pTri.style.left = pContiner.offsetWidth / 2 - 10 + 'px';
//确定大的popover的位置
var eWidth = ele.offsetWidth;
pContiner.style.top = matrix.top + ele.offsetHeight + 10 + document.body.scrollTop + 'px';
} else {
throw 'the value of "y" is illegal.'
}
//x影响的是popover的左右 left center right
var leftOff = getXoffSet(x, ele);
pContiner.style.left = matrix.left + leftOff - pContiner.offsetWidth / 2 + 'px';
//给元素内部对象赋值 为了之后的 v1.0.1版本可以在初始化后重新进行定位组装
fPopoverInit['x'] = x;
fPopoverInit['y'] = y;
ele.fPopoverInit = fPopoverInit;
} else {
exist(fPopoverInit, fName);
}
}
/**
* popover已经初始化后的方法
*/
function exist(fPopoverInit, fName) {
//popover已经被初始化过了，对于 hidden destroy两个方法，只要让其消失或者删除就可以了，无需重新进行定位计算
switch (fName) {
case "show":
var id = fPopoverInit.id;
select('#' + id).style.display = "block";
break;
case "hidden":
var id = fPopoverInit.id;
if (id === undefined) {
throw 'fPopover has error! ';
}
select('#' + id).style.display = 'none';
break;
case "destroy":
select('#' + id).remove();
break;
default:
throw 'the name of function is illegal.';
}
}
//获取x轴上设定的偏移量
function getXoffSet(x, ele) {
var eWidth = ele.offsetWidth;
var leftOff = 0;
switch (x) {
case "left":
leftOff = 0;
break;
case "center":
leftOff = eWidth / 2;
break;
case "right":
leftOff = eWidth;
break;
default:
if (!/^\d+\.{0,1}\d+$/.test(x) && x !== "0") {
return null;
}
leftOff = eWidth * x / 100;
break;
}
return leftOff;
}
}cssd代码：
.fpopover {
/*width: 100px;
height: 100px;*/
position: absolute;
background-color: #fff;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.24);
border:1px solid #000;
z-index: 999;
}
.fpopover-triangle {
position: absolute;
}
.fpopover-triangle-up:after {
content: " ";
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.fpopover-triangle-down:before {
content: " ";
border-top: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.fpopover-context {
margin: 4px;
}