经验分享程序开发文档资料数据资源其它资源

jQuery Tooltips悬停提示效果

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery Tooltips悬停提示效果 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery Tooltips悬停提示效果

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Tooltips��ͣ��ʾЧ��</title>
<meta charset="gb2312" />
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		 $('.tooltip').tooltipster();
	});
</script>

</head>
<body>
<br><br><br><br><br><br><br><br>
<section id="facebook">
<ul>
<a href="#" target="_blank"><span id="fackbook" class="tooltip" title="����">����</span></a>
</ul>
</section>
 
<section id="twitter">
<ul> 
<a href="#" target="_blank"><span id="twitter-default" class="tooltip" title="����">����</span></a>
</ul>
</section>
 
 
<section id="google">
<ul> 
<a href="#" target="_blank"><span id="google-default" class="tooltip" title="jQuery">jQuery</span></a>
</ul>
</section>
 

<section id="rss">
<ul> 
<a href="#" target="_blank"><span id="rss-default" class="tooltip" title="վ��֮��">վ��֮��</span></a>
</ul>
</section>

<section id="tech">
<ul> 
<a href="#"><span id="tech-default" class="tooltip" title="CSS3">CSS3</span></a>
</ul>
</section>
</center>

<section id="dribbble">
<ul> 
<a href="#" target="_blank"><span id="dribbble-default" class="tooltip" title="HTML5">HTML5</span></a>
</ul>
</section><br>
</body>
</html>

JS代码(jquery.tooltipster.js):

/*Tooltipster 2.1.4 | 6/1/13A rockin' custom tooltip jQuery pluginDeveloped by:Caleb Jacob - calebjacob.comCopyright (C) 2013 Caleb JacobTHE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/
;
	(function ($,window,document,undefined){
	var pluginName = "tooltipster",defaults ={
	animation:'fade',arrow:true,arrowColor:'',content:'',delay:200,fixedWidth:0,maxWidth:0,functionBefore:function(origin,continueTooltip){
	continueTooltip();
}
,functionReady:function(origin,tooltip){
}
,functionAfter:function(origin){
}
,icon:'(?)',iconDesktop:false,iconTouch:false,iconTheme:'.tooltipster-icon',interactive:false,interactiveTolerance:350,offsetX:0,offsetY:0,onlyOne:true,position:'top',speed:350,timer:0,theme:'.tooltipster-default',touchDevices:true,trigger:'hover',updateAnimation:true}
;
	function Plugin(element,options){
	this.element = element;
	this.options = $.extend({
}
,defaults,options );
	this._defaults = defaults;
	this._name = pluginName;
	this.init();
}
// we'll use this to detect for mobile devicesfunction is_touch_device(){
	return !!('ontouchstart' in window);
}
// detecting support for CSS transitionsfunction supportsTransitions(){
	var b = document.body || document.documentElement;
	var s = b.style;
	var p = 'transition';
	if(typeof s[p] == 'string'){
	return true;
}
v = ['Moz','Webkit','Khtml','O','ms'],p = p.charAt(0).toUpperCase() + p.substr(1);
	for(var i=0;
	i<v.length;
	i++){
	if(typeof s[v[i] + p] == 'string'){
	return true;
}
}
return false;
}
var transitionSupport = true;
	if (!supportsTransitions()){
	transitionSupport = false;
}
// detect if this device is mouse driven over purely touch var touchDevice = is_touch_device();
	// on mousemove,double confirm that this is a desktop - not a touch device$(window).on('mousemove.tooltipster',function(){
	touchDevice = false;
	$(window).off('mousemove.tooltipster');
}
);
	Plugin.prototype ={
	init:function(){
	var $this = $(this.element);
	var object = this;
	var run = true;
	// if this is a touch device and touch devices are disabled,disable the pluginif ((object.options.touchDevices == false) && (touchDevice)){
	run = false;
}
// if IE7 or lower,disable the pluginif (document.all && !document.querySelector){
	run = false;
}
if (run == true){
	// detect if we're changing the tooltip origin to an iconif ((this.options.iconDesktop == true) && (!touchDevice) || ((this.options.iconTouch == true) && (touchDevice))){
	var transferContent = $this.attr('title');
	$this.removeAttr('title');
	var theme = object.options.iconTheme;
	var icon = $('<span class="'+ theme.replace('.','') +'" title="'+ transferContent +'">'+ this.options.icon +'</span>');
	icon.insertAfter($this);
	$this.data('tooltipsterIcon',icon);
	$this = icon;
}
// first,strip the title off of the element and set it as a data attribute to prevent the default tooltips from popping upvar tooltipsterContent = $.trim(object.options.content).length > 0 ? object.options.content:$this.attr('title');
	$this.data('tooltipsterContent',tooltipsterContent);
	$this.removeAttr('title');
	// if this is a touch device,add some touch events to launch the tooltipif ((this.options.touchDevices == true) && (touchDevice) && ((this.options.trigger == 'click') || (this.options.trigger == 'hover'))){
	$this.bind('touchstart',function(element,options){
	object.showTooltip();
}
);
}
// if this is a desktop,deal with adding regular mouse eventselse{
	// if hover events are set to show and hide the tooltip,attach those events respectivelyif (this.options.trigger == 'hover'){
	$this.on('mouseenter.tooltipster',function(){
	object.showTooltip();
}
);
	// if this is an interactive tooltip,delay getting rid of the tooltip right away so you have a chance to hover on the tooltipif (this.options.interactive == true){
	$this.on('mouseleave.tooltipster',function(){
	var tooltipster = $this.data('tooltipster');
	var keepAlive = false;
	if ((tooltipster !== undefined) && (tooltipster !== '')){
	tooltipster.mouseenter(function(){
	keepAlive = true;
}
);
	tooltipster.mouseleave(function(){
	keepAlive = false;
}
);
	var tolerance = setTimeout(function(){
	if (keepAlive == true){
	tooltipster.mouseleave(function(){
	object.hideTooltip();
}
);
}
else{
	object.hideTooltip();
}
}
,object.options.interactiveTolerance);
}
else{
	object.hideTooltip();
}
}
);
}
// if this is a dumb tooltip,just get rid of it on mouseleaveelse{
	$this.on('mouseleave.tooltipster',function(){
	object.hideTooltip();
}
);
}
}
// if click events are set to show and hide the tooltip,attach those events respectivelyif (this.options.trigger == 'click'){
	$this.on('click.tooltipster',function(){
	if (($this.data('tooltipster') == '') || ($this.data('tooltipster') == undefined)){
	object.showTooltip();
}
else{
	object.hideTooltip();
}
}
);
}
}
}
}
,showTooltip:function(options){
	var $this = $(this.element);
	var object = this;
	// detect if we're actually dealing with an icon or the origin itselfif ($this.data('tooltipsterIcon') !== undefined){
	$this = $this.data('tooltipsterIcon');
}
// continue if this tooltip is enabledif (!$this.hasClass('tooltipster-disable')){
	// if we only want one tooltip open at a time,close all tooltips currently openif (($('.tooltipster-base').not('.tooltipster-dying').length > 0) && (object.options.onlyOne == true)){
	$('.tooltipster-base').not('.tooltipster-dying').not($this.data('tooltipster')).each(function(){
	$(this).addClass('tooltipster-kill');
	var origin = $(this).data('origin');
	origin.data('plugin_tooltipster').hideTooltip();
}
);
}
// delay the showing of the tooltip according to the delay time$this.clearQueue().delay(object.options.delay).queue(function(){
	// call our custom function before continuingobject.options.functionBefore($this,function(){
	// if this origin already has its tooltip open,keep it open and do nothing elseif (($this.data('tooltipster') !== undefined) && ($this.data('tooltipster') !== '')){
	var tooltipster = $this.data('tooltipster');
	if (!tooltipster.hasClass('tooltipster-kill')){
	var animation = 'tooltipster-'+ object.options.animation;
	tooltipster.removeClass('tooltipster-dying');
	if (transitionSupport == true){
	tooltipster.clearQueue().addClass(animation +'-show');
}
// if we have a timer set,we need to reset itif (object.options.timer > 0){
	var timer = tooltipster.data('tooltipsterTimer');
	clearTimeout(timer);
	timer = setTimeout(function(){
	tooltipster.data('tooltipsterTimer',undefined);
	object.hideTooltip();
}
,object.options.timer);
	tooltipster.data('tooltipsterTimer',timer);
}
// if this is a touch device,hide the tooltip on body touchif ((object.options.touchDevices == true) && (touchDevice)){
	$('body').bind('touchstart',function(event){
	if (object.options.interactive == true){
	var touchTarget = $(event.target);
	var closeTooltip = true;
	touchTarget.parents().each(function(){
	if ($(this).hasClass('tooltipster-base')){
	closeTooltip = false;
}
}
);
	if (closeTooltip == true){
	object.hideTooltip();
	$('body').unbind('touchstart');
}
}
else{
	object.hideTooltip();
	$('body').unbind('touchstart');
}
}
);
}
}
}
// if the tooltip isn't already open,open that sucker up!else{
	// disable horizontal scrollbar to keep overflowing tooltips from jacking with it$('body').css('overflow-x','hidden');
	// get the content for the tooltipvar content = $this.data('tooltipsterContent');
	// get some other settings related to building the tooltipvar theme = object.options.theme;
	var themeClass = theme.replace('.','');
	var animation = 'tooltipster-'+object.options.animation;
	var animationSpeed = '-webkit-transition-duration:'+ object.options.speed +'ms;
	-webkit-animation-duration:'+ object.options.speed +'ms;
	-moz-transition-duration:'+ object.options.speed +'ms;
	-moz-animation-duration:'+ object.options.speed +'ms;
	-o-transition-duration:'+ object.options.speed +'ms;
	-o-animation-duration:'+ object.options.speed +'ms;
	-ms-transition-duration:'+ object.options.speed +'ms;
	-ms-animation-duration:'+ object.options.speed +'ms;
	transition-duration:'+ object.options.speed +'ms;
	animation-duration:'+ object.options.speed +'ms;
	';
	var fixedWidth = object.options.fixedWidth > 0 ? 'width:'+ Math.round(object.options.fixedWidth) +'px;
	':'';
	var maxWidth = object.options.maxWidth > 0 ? 'max-width:'+ Math.round(object.options.maxWidth) +'px;
	':'';
	var pointerEvents = object.options.interactive == true ? 'pointer-events:auto;
	':'';
	// build the base of our tooltipvar tooltipster = $('<div class="tooltipster-base '+ themeClass +' '+ animation +'" style="'+ fixedWidth +' '+ maxWidth +' '+ pointerEvents +' '+ animationSpeed +'"></div>');
	var tooltipsterHTML = $('<div class="tooltipster-content"></div>');
	tooltipsterHTML.html(content);
	tooltipster.append(tooltipsterHTML);
	tooltipster.appendTo('body');
	// attach the tooltip to its origin$this.data('tooltipster',tooltipster);
	tooltipster.data('origin',$this);
	// do all the crazy calculations and positioningobject.positionTooltip();
	// call our custom callback since the content of the tooltip is now part of the DOMobject.options.functionReady($this,tooltipster);
	// animate in the tooltipif (transitionSupport == true){
	tooltipster.addClass(animation + '-show');
}
else{
	tooltipster.css('display','none').removeClass(animation).fadeIn(object.options.speed);
}
// check to see if our tooltip content changes or its origin is removed while the tooltip is alivevar currentTooltipContent = content;
	var contentUpdateChecker = setInterval(function(){
	var newTooltipContent = $this.data('tooltipsterContent');
	// if this tooltip's origin is removed,remove the tooltipif ($('body').find($this).length == 0){
	tooltipster.addClass('tooltipster-dying');
	object.hideTooltip();
}
// if the content changed for the tooltip,update itelse if ((currentTooltipContent !== newTooltipContent) && (newTooltipContent !== '')){
	currentTooltipContent = newTooltipContent;
	// set the new content in the tooltiptooltipster.find('.tooltipster-content').html(newTooltipContent);
	// if we want to play a little animation showing the content changedif (object.options.updateAnimation == true){
	if (supportsTransitions()){
	tooltipster.css({
	'width':'','-webkit-transition':'all ' + object.options.speed + 'ms,width 0ms,height 0ms,left 0ms,top 0ms','-moz-transition':'all ' + object.options.speed + 'ms,width 0ms,height 0ms,left 0ms,top 0ms','-o-transition':'all ' + object.options.speed + 'ms,width 0ms,height 0ms,left 0ms,top 0ms','-ms-transition':'all ' + object.options.speed + 'ms,width 0ms,height 0ms,left 0ms,top 0ms','transition':'all ' + object.options.speed + 'ms,width 0ms,height 0ms,left 0ms,top 0ms'}
).addClass('tooltipster-content-changing');
	// reset the CSS transitions and finish the change animationsetTimeout(function(){
	tooltipster.removeClass('tooltipster-content-changing');
	// after the changing animation has completed,reset the CSS transitionssetTimeout(function(){
	tooltipster.css({
	'-webkit-transition':object.options.speed + 'ms','-moz-transition':object.options.speed + 'ms','-o-transition':object.options.speed + 'ms','-ms-transition':object.options.speed + 'ms','transition':object.options.speed + 'ms'}
);
}
,object.options.speed);
}
,object.options.speed);
}
else{
	tooltipster.fadeTo(object.options.speed,0.5,function(){
	tooltipster.fadeTo(object.options.speed,1);
}
);
}
}
// reposition and resize the tooltipobject.positionTooltip();
}
// if the tooltip is closed or origin is removed,clear this intervalif (($('body').find(tooltipster).length == 0) || ($('body').find($this).length == 0)){
	clearInterval(contentUpdateChecker);
}
}
,200);
	// if we have a timer set,let the countdown begin!if (object.options.timer > 0){
	var timer = setTimeout(function(){
	tooltipster.data('tooltipsterTimer',undefined);
	object.hideTooltip();
}
,object.options.timer + object.options.speed);
	tooltipster.data('tooltipsterTimer',timer);
}
// if this is a touch device,hide the tooltip on body touchif ((object.options.touchDevices == true) && (touchDevice)){
	$('body').bind('touchstart',function(event){
	if (object.options.interactive == true){
	var touchTarget = $(event.target);
	var closeTooltip = true;
	touchTarget.parents().each(function(){
	if ($(this).hasClass('tooltipster-base')){
	closeTooltip = false;
}
}
);
	if (closeTooltip == true){
	object.hideTooltip();
	$('body').unbind('touchstart');
}
}
else{
	object.hideTooltip();
	$('body').unbind('touchstart');
}
}
);
}
// if this is an interactive tooltip activated by a click,close the tooltip when you hover off the tooltiptooltipster.mouseleave(function(){
	object.hideTooltip();
}
);
}
}
);
	$this.dequeue();
}
);
}
}
,hideTooltip:function(options){
	var $this = $(this.element);
	var object = this;
	// detect if we're actually dealing with an icon or the origin itselfif ($this.data('tooltipsterIcon') !== undefined){
	$this = $this.data('tooltipsterIcon');
}
var tooltipster = $this.data('tooltipster');
	// if the origin has been removed,find all tooltips assigned to deathif (tooltipster == undefined){
	tooltipster = $('.tooltipster-dying');
}
// clear any possible queues handling delays and such$this.clearQueue();
	if ((tooltipster !== undefined) && (tooltipster !== '')){
	// detect if we need to clear a timervar timer = tooltipster.data('tooltipsterTimer');
	if (timer !== undefined){
	clearTimeout(timer);
}
var animation = 'tooltipster-'+ object.options.animation;
	if (transitionSupport == true){
	tooltipster.clearQueue().removeClass(animation +'-show').addClass('tooltipster-dying').delay(object.options.speed).queue(function(){
	tooltipster.remove();
	$this.data('tooltipster','');
	$('body').css('verflow-x','');
	// finally,call our custom callback functionobject.options.functionAfter($this);
}
);
}
else{
	tooltipster.clearQueue().addClass('tooltipster-dying').fadeOut(object.options.speed,function(){
	tooltipster.remove();
	$this.data('tooltipster','');
	$('body').css('verflow-x','');
	// finally,call our custom callback functionobject.options.functionAfter($this);
}
);
}
}
}
,positionTooltip:function(options){
	var $this = $(this.element);
	var object = this;
	// detect if we're actually dealing with an icon or the origin itselfif ($this.data('tooltipsterIcon') !== undefined){
	$this = $this.data('tooltipsterIcon');
}
if (($this.data('tooltipster') !== undefined) && ($this.data('tooltipster') !== '')){
	// find tooltipster and reset its widthvar tooltipster = $this.data('tooltipster');
	tooltipster.css('width','');
	// find variables to determine placementvar windowWidth = $(window).width();
	var containerWidth = $this.outerWidth(false);
	var containerHeight = $this.outerHeight(false);
	var tooltipWidth = tooltipster.outerWidth(false);
	var tooltipInnerWidth = tooltipster.innerWidth() + 1;
	// this +1 stops FireFox from sometimes forcing an additional text linevar tooltipHeight = tooltipster.outerHeight(false);
	var offset = $this.offset();
	var offsetTop = offset.top;
	var offsetLeft = offset.left;
	var resetPosition = undefined;
	// if this is an <area> tag inside a <map>,all hell breaks loose. Recaclulate all the measurements based on coordinatesif ($this.is('area')){
	var areaShape = $this.attr('shape');
	var mapName = $this.parent().attr('name');
	var map = $('img[usemap="#'+ mapName +'"]');
	var mapOffsetLeft = map.offset().left;
	var mapOffsetTop = map.offset().top;
	var areaMeasurements = $this.attr('coords') !== undefined ? $this.attr('coords').split(','):undefined;
	if (areaShape == 'circle'){
	var areaLeft = parseInt(areaMeasurements[0]);
	var areaTop = parseInt(areaMeasurements[1]);
	var areaWidth = parseInt(areaMeasurements[2]);
	containerHeight = areaWidth * 2;
	containerWidth = areaWidth * 2;
	offsetTop = mapOffsetTop + areaTop - areaWidth;
	offsetLeft = mapOffsetLeft + areaLeft - areaWidth;
}
else if (areaShape == 'rect'){
	var areaLeft = parseInt(areaMeasurements[0]);
	var areaTop = parseInt(areaMeasurements[1]);
	var areaRight = parseInt(areaMeasurements[2]);
	var areaBottom = parseInt(areaMeasurements[3]);
	containerHeight = areaBottom - areaTop;
	containerWidth = areaRight - areaLeft;
	offsetTop = mapOffsetTop + areaTop;
	offsetLeft = mapOffsetLeft + areaLeft;
}
else if (areaShape == 'poly'){
	var areaXs = [];
	var areaYs = [];
	var areaSmallestX = 0,areaSmallestY = 0,areaGreatestX = 0,areaGreatestY = 0;
	var arrayAlternate = 'even';
	for (i = 0;
	i < areaMeasurements.length;
	i++){
	var areaNumber = parseInt(areaMeasurements[i]);
	if (arrayAlternate == 'even'){
	if (areaNumber > areaGreatestX){
	areaGreatestX = areaNumber;
	if (i == 0){
	areaSmallestX = areaGreatestX;
}
}
if (areaNumber < areaSmallestX){
	areaSmallestX = areaNumber;
}
arrayAlternate = 'odd';
}
else{
	if (areaNumber > areaGreatestY){
	areaGreatestY = areaNumber;
	if (i == 1){
	areaSmallestY = areaGreatestY;
}
}
if (areaNumber < areaSmallestY){
	areaSmallestY = areaNumber;
}
arrayAlternate = 'even';
}
}
containerHeight = areaGreatestY - areaSmallestY;
	containerWidth = areaGreatestX - areaSmallestX;
	offsetTop = mapOffsetTop + areaSmallestY;
	offsetLeft = mapOffsetLeft + areaSmallestX;
}
else{
	containerHeight = map.outerHeight(false);
	containerWidth = map.outerWidth(false);
	offsetTop = mapOffsetTop;
	offsetLeft = mapOffsetLeft;
}
}
// hardcoding the width and removing the padding fixed an issue with the tooltip width collapsing when the window size is smallif(object.options.fixedWidth == 0){
	tooltipster.css({
	'width':Math.round(tooltipInnerWidth) + 'px','padding-left':'0px','padding-right':'0px'}
);
}
// our function and global vars for positioning our tooltipvar myLeft = 0,myTop = 0;
	var offsetY = parseInt(object.options.offsetY);
	var offsetX = parseInt(object.options.offsetX);
	var arrowConstruct = '';
	// A function to detect if the tooltip is going off the screen horizontally. If so,reposition the crap out of it!function dontGoOffScreenX(){
	var windowLeft = $(window).scrollLeft();
	// If the tooltip goes off the left side of the screen,line it up with the left side of the windowif((myLeft - windowLeft) < 0){
	var arrowReposition = myLeft - windowLeft;
	myLeft = windowLeft;
	tooltipster.data('arrow-reposition',arrowReposition);
}
// If the tooltip goes off the right of the screen,line it up with the right side of the windowif (((myLeft + tooltipWidth) - windowLeft) > windowWidth){
	var arrowReposition = myLeft - ((windowWidth + windowLeft) - tooltipWidth);
	myLeft = (windowWidth + windowLeft) - tooltipWidth;
	tooltipster.data('arrow-reposition',arrowReposition);
}
}
// A function to detect if the tooltip is going off the screen vertically. If so,switch to the opposite!function dontGoOffScreenY(switchTo,resetTo){
	// if it goes off the top off the pageif(((offsetTop - $(window).scrollTop() - tooltipHeight - offsetY - 12) < 0) && (resetTo.indexOf('top') > -1)){
	object.options.position = switchTo;
	resetPosition = resetTo;
}
// if it goes off the bottom of the pageif (((offsetTop + containerHeight + tooltipHeight + 12 + offsetY) > ($(window).scrollTop() + $(window).height())) && (resetTo.indexOf('bottom') > -1)){
	object.options.position = switchTo;
	resetPosition = resetTo;
	myTop = (offsetTop - tooltipHeight) - offsetY - 12;
}
}
if(object.options.position == 'top'){
	var leftDifference = (offsetLeft + tooltipWidth) - (offsetLeft + containerWidth);
	myLeft = (offsetLeft + offsetX) - (leftDifference / 2);
	myTop = (offsetTop - tooltipHeight) - offsetY - 12;
	dontGoOffScreenX();
	dontGoOffScreenY('bottom','top');
}
if(object.options.position == 'top-left'){
	myLeft = offsetLeft + offsetX;
	myTop = (offsetTop - tooltipHeight) - offsetY - 12;
	dontGoOffScreenX();
	dontGoOffScreenY('bottom-left','top-left');
}
if(object.options.position == 'top-right'){
	myLeft = (offsetLeft + containerWidth + offsetX) - tooltipWidth;
	myTop = (offsetTop - tooltipHeight) - offsetY - 12;
	dontGoOffScreenX();
	dontGoOffScreenY('bottom-right','top-right');
}
if(object.options.position == 'bottom'){
	var leftDifference = (offsetLeft + tooltipWidth) - (offsetLeft + containerWidth);
	myLeft = offsetLeft - (leftDifference / 2) + offsetX;
	myTop = (offsetTop + containerHeight) + offsetY + 12;
	dontGoOffScreenX();
	dontGoOffScreenY('top','bottom');
}
if(object.options.position == 'bottom-left'){
	myLeft = offsetLeft + offsetX;
	myTop = (offsetTop + containerHeight) + offsetY + 12;
	dontGoOffScreenX();
	dontGoOffScreenY('top-left','bottom-left');
}
if(object.options.position == 'bottom-right'){
	myLeft = (offsetLeft + containerWidth + offsetX) - tooltipWidth;
	myTop = (offsetTop + containerHeight) + offsetY + 12;
	dontGoOffScreenX();
	dontGoOffScreenY('top-right','bottom-right');
}
if(object.options.position == 'left'){
	myLeft = offsetLeft - offsetX - tooltipWidth - 12;
	myLeftMirror = offsetLeft + offsetX + containerWidth + 12;
	var topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
	myTop = offsetTop - (topDifference / 2) - offsetY;
	// If the tooltip goes off boths sides of the pageif((myLeft < 0) && ((myLeftMirror + tooltipWidth) > windowWidth)){
	var borderWidth = parseFloat(tooltipster.css('border-width')) * 2;
	var newWidth = (tooltipWidth + myLeft) - borderWidth;
	tooltipster.css('width',newWidth + 'px');
	tooltipHeight = tooltipster.outerHeight(false);
	myLeft = offsetLeft - offsetX - newWidth - 12 - borderWidth;
	topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
	myTop = offsetTop - (topDifference / 2) - offsetY;
}
// If it only goes off one side,flip it to the other sideelse if(myLeft < 0){
	myLeft = offsetLeft + offsetX + containerWidth + 12;
	tooltipster.data('arrow-reposition','left');
}
}
if(object.options.position == 'right'){
	myLeft = offsetLeft + offsetX + containerWidth + 12;
	myLeftMirror = offsetLeft - offsetX - tooltipWidth - 12;
	var topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
	myTop = offsetTop - (topDifference / 2) - offsetY;
	// If the tooltip goes off boths sides of the pageif(((myLeft + tooltipWidth) > windowWidth) && (myLeftMirror < 0)){
	var borderWidth = parseFloat(tooltipster.css('border-width')) * 2;
	var newWidth = (windowWidth - myLeft) - borderWidth;
	tooltipster.css('width',newWidth + 'px');
	tooltipHeight = tooltipster.outerHeight(false);
	topDifference = (offsetTop + tooltipHeight) - (offsetTop + $this.outerHeight(false));
	myTop = offsetTop - (topDifference / 2) - offsetY;
}
// If it only goes off one side,flip it to the other sideelse if((myLeft + tooltipWidth) > windowWidth){
	myLeft = offsetLeft - offsetX - tooltipWidth - 12;
	tooltipster.data('arrow-reposition','right');
}
}
// if arrow is set true,style it and append itif (object.options.arrow == true){
	var arrowClass = 'tooltipster-arrow-' + object.options.position;
	// set color of the arrowif(object.options.arrowColor.length < 1){
	var arrowColor = tooltipster.css('background-color');
}
else{
	var arrowColor = object.options.arrowColor;
}
// if the tooltip was going off the page and had to re-adjust,we need to update the arrow's positionvar arrowReposition = tooltipster.data('arrow-reposition');
	if (!arrowReposition){
	arrowReposition = '';
}
else if (arrowReposition == 'left'){
	arrowClass = 'tooltipster-arrow-right';
	arrowReposition = '';
}
else if (arrowReposition == 'right'){
	arrowClass = 'tooltipster-arrow-left';
	arrowReposition = '';
}
else{
	arrowReposition = 'left:'+ Math.round(arrowReposition) +'px;
	';
}
// building the logic to create the border around the arrow of the tooltipif ((object.options.position == 'top') || (object.options.position == 'top-left') || (object.options.position == 'top-right')){
	var tooltipBorderWidth = parseFloat(tooltipster.css('border-bottom-width'));
	var tooltipBorderColor = tooltipster.css('border-bottom-color');
}
else if ((object.options.position == 'bottom') || (object.options.position == 'bottom-left') || (object.options.position == 'bottom-right')){
	var tooltipBorderWidth = parseFloat(tooltipster.css('border-top-width'));
	var tooltipBorderColor = tooltipster.css('border-top-color');
}
else if (object.options.position == 'left'){
	var tooltipBorderWidth = parseFloat(tooltipster.css('border-right-width'));
	var tooltipBorderColor = tooltipster.css('border-right-color');
}
else if (object.options.position == 'right'){
	var tooltipBorderWidth = parseFloat(tooltipster.css('border-left-width'));
	var tooltipBorderColor = tooltipster.css('border-left-color');
}
else{
	var tooltipBorderWidth = parseFloat(tooltipster.css('border-bottom-width'));
	var tooltipBorderColor = tooltipster.css('border-bottom-color');
}
if (tooltipBorderWidth > 1){
	tooltipBorderWidth++;
}
var arrowBorder = '';
	if (tooltipBorderWidth !== 0){
	var arrowBorderSize = '';
	var arrowBorderColor = 'border-color:'+ tooltipBorderColor +';
	';
	if (arrowClass.indexOf('bottom') !== -1){
	arrowBorderSize = 'margin-top:-'+ Math.round(tooltipBorderWidth) +'px;
	';
}
else if (arrowClass.indexOf('top') !== -1){
	arrowBorderSize = 'margin-bottom:-'+ Math.round(tooltipBorderWidth) +'px;
	';
}
else if (arrowClass.indexOf('left') !== -1){
	arrowBorderSize = 'margin-right:-'+ Math.round(tooltipBorderWidth) +'px;
	';
}
else if (arrowClass.indexOf('right') !== -1){
	arrowBorderSize = 'margin-left:-'+ Math.round(tooltipBorderWidth) +'px;
	';
}
arrowBorder = '<span class="tooltipster-arrow-border" style="'+ arrowBorderSize +' '+ arrowBorderColor +';
	"></span>';
}
// if the arrow already exists,remove and replace ittooltipster.find('.tooltipster-arrow').remove();
	// build out the arrow and append itarrowConstruct = '<div class="'+ arrowClass +' tooltipster-arrow" style="'+ arrowReposition +'">'+ arrowBorder +'<span style="border-color:'+ arrowColor +';
	"></span></div>';
	tooltipster.append(arrowConstruct);
}
// position the tooltiptooltipster.css({
	'top':Math.round(myTop) + 'px','left':Math.round(myLeft) + 'px'}
);
	// if we had to change the position of the tooltip so it wouldn't go off screen,reset itif (resetPosition !== undefined){
	object.options.position = resetPosition;
}
}
}
}
;
	$.fn[pluginName] = function (options){
	// better API name spacing by glebtvif (typeof options === 'string'){
	var $t = this;
	var newContent = arguments[1];
	// if we're calling a container to interact with API's of tooltips inside it - select all those tooltip origins firstif ($t.data('plugin_tooltipster') == undefined){
	var query = $t.find('*');
	$t = $();
	query.each(function(){
	if ($(this).data('plugin_tooltipster') !== undefined){
	$t.push($(this));
}
}
);
}
$t.each(function(){
	switch (options.toLowerCase()){
	case 'show':$(this).data('plugin_tooltipster').showTooltip();
	break;
	case 'hide':$(this).data('plugin_tooltipster').hideTooltip();
	break;
	case 'disable':$(this).addClass('tooltipster-disable');
	break;
	case 'enable':$(this).removeClass('tooltipster-disable');
	break;
	case 'destroy':$(this).data('plugin_tooltipster').hideTooltip();
	$(this).data('plugin_tooltipster','').attr('title',$t.data('tooltipsterContent')).data('tooltipsterContent','').data('plugin_tooltipster','').off('mouseenter.tooltipster mouseleave.tooltipster click.tooltipster').unbind('touchstart');
	break;
	case 'update':if ($(this).data('tooltipsterIcon') == undefined){
	$(this).data('tooltipsterContent',newContent);
}
else{
	var $this = $(this).data('tooltipsterIcon');
	$this.data('tooltipsterContent',newContent);
}
break;
	case 'reposition':$(this).data('plugin_tooltipster').positionTooltip();
	break;
}
}
);
	return this;
}
// attach a tooltipster object to each element if it doesn't already have onereturn this.each(function (){
	if (!$.data(this,"plugin_" + pluginName)){
	$.data(this,"plugin_" + pluginName,new Plugin( this,options ));
}
var thisOptions = $(this).data('plugin_tooltipster').options;
	if ((thisOptions.iconDesktop == true) && (!touchDevice) || ((thisOptions.iconTouch == true) && (touchDevice))){
	var transferObject = $(this).data('plugin_tooltipster');
	$(this).next().data('plugin_tooltipster',transferObject);
}
}
);
}
;
	// hide tooltips on orientation changeif (touchDevice){
	window.addEventListener("orientationchange",function(){
	if ($('.tooltipster-base').length > 0){
	$('.tooltipster-base').each(function(){
	var origin = $(this).data('origin');
	origin.data('plugin_tooltipster').hideTooltip();
}
);
}
}
,false);
}
// on window resize,reposition and open tooltips$(window).on('resize.tooltipster',function(){
	var origin = $('.tooltipster-base').data('origin');
	if ((origin !== null) && (origin !== undefined)){
	origin.tooltipster('reposition');
}
}
);
}
)( jQuery,window,document );

CSS代码(style2.css):

*{-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;transition:all 300ms;}
-------------------------------------Facebook-------------------------------------*/
#facebook li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#facebook span{display:block;border:3px solid #325f83;/*Button Border color and border size - Techandall.com*/
border-radius:100%;/* you can change the border radius if you want a square button,example 10% - Techandall.com*/
box-sizing:border-box;-moz-box-sizing:border-box;width:7em;height:7em;background:#01457b;/*Button background color - Techandall.com*/
color:#fff;/*Button font color - Techandall.com*/
font-family:Arial,Helvetica,sans-serif;font-size:0.6em;line-height:1em;font-weight:700;padding:2.7em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#facebook span:hover{background:#fff !important;color:#5d6365;/*Button hover colors - Techandall.com*/
border:3px solid #5d6365 !important;cursor:pointer;}
-------------------------------------Twitter-------------------------------------*/
#twitter li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#twitter span{display:block;border:3px solid #1c68a5;border-radius:100%;box-sizing:border-box;-moz-box-sizing:border-box;width:7em;height:7em;background:#3186ca;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:0.6em;line-height:1em;font-weight:700;padding:2.7em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#twitter span:hover{background:#fff !important;color:#5d6365;border:3px solid #5d6365 !important;cursor:pointer;}
-------------------------------------Google Plus-------------------------------------*/
#google li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#google span{display:block;border:3px solid #c23a34;border-radius:100%;box-sizing:border-box;-moz-box-sizing:border-box;width:7em;height:7em;background:#f05851;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:0.6em;line-height:1em;font-weight:700;padding:2.7em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#google span:hover{background:#fff !important;color:#5d6365;border:3px solid #5d6365 !important;cursor:pointer;}
-------------------------------------RSS Feed-------------------------------------*/
#rss li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#rss span{display:block;border:3px solid #f38134;border-radius:100%;box-sizing:border-box;-moz-box-sizing:border-box;width:7em;height:7em;background:#ff6600;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:0.6em;line-height:1em;font-weight:700;padding:2.7em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#rss span:hover{background:#fff !important;color:#5d6365;border:3px solid #5d6365 !important;cursor:pointer;}
-------------------------------------Techandall-------------------------------------*/
#tech li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#tech span{display:block;border:3px solid #66ecbe;border-radius:100%;box-sizing:border-box;-moz-box-sizing:border-box;width:7em;height:7em;background:#c0eede;color:#406d5e;font-family:Arial,Helvetica,sans-serif;font-size:0.6em;line-height:1em;font-weight:700;padding:2.7em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#tech span:hover{background:#fff !important;color:#5d6365;border:3px solid #5d6365 !important;cursor:pointer;}
-------------------------------------dribbble-------------------------------------*/
#dribbble li{display:block;width:50%;font-weight:400;margin-bottom:1em;overflow:hidden;padding-top:1.4em;padding-right:2em;box-sizing:border-box;-moz-box-sizing:border-box;float:left;}
#dribbble span{display:block;border:3px solid #f88db6;border-radius:100%;box-sizing:border-box;-moz-box-sizing:border-box;width:7em;height:7em;background:#ea4c89;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:0.6em;line-height:1em;font-weight:700;padding:2.7em 0 0 0;text-align:center;margin:-1.4em 1em 0 0;text-transform:uppercase;float:left;}
#dribbble span:hover{background:#fff !important;color:#5d6365;border:3px solid #5d6365 !important;cursor:pointer;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
38.74 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
38.74 KB
立即下载
薛馥秀
了解
打赏作者 鼓励作者
Html CSS3特效
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章