有谁知道是否可以在脚本中控制qTip2的背景颜色?我能够动态设置消息,但我无法更改背景颜色。我有一系列不同颜色的DIV,我需要工具提示根据DIV的背景颜色改变颜色。使用我的javascript,我能够获得DIV的背景颜色,但我无法在qTip2中设置背景颜色。
jQuery(document).ready(function($){
$(".tooltip").each(function(){
$toolTip = $(this).data('title');
var bgColor = $(this).css('backgroundColor');
hexc(bgColor);
function hexc(colorval) {
var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
delete(parts[0]);
for (var i = 1; i <= 3; ++i) {
parts[i] = parseInt(parts[i]).toString(16);
if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
color = '#' + parts.join('');
$bgColor = color;
}
$('.tool-tip').css('backgroundColor', $bgColor)
$(this).qtip({
content: {
text: $toolTip
},
position: {
my: 'bottom right',
at: 'top right',
target: 'mouse'
},
style: {
classes: 'tool-tip',
tip: {
height: 15
}
}
})
});
});
答案 0 :(得分:1)
有关如何动态更改样式类的信息,请参阅QTip2 dynamic show/hide events and slideDown。然后,您应该能够调整类以匹配您的div。
是的,我知道这个问题很久以前就被问过了,但希望它可以帮助其他人。
该链接提供以下信息:
至少有三种方法可以动态设置Qtip选项。
在qtip属性之外设置变量并使用它们 如果可用,请使用回调功能 使用事件功能 我确信还有其他方法可以实现这一点,但下面的代码适用于我需要的所有情况,并演示了所有这三种方法。我需要使用至少两个,因为fadeIn方法不会让我只使用一个变量。仅当intFade未定义时,我才能调用fadeIn方法。
所以,希望这个答案有助于其他人。
function setupQtips()
{
$("*[qtipiddiv]").each
(
function ()
{
//Title
var elmTarget = $(this);
var strTitle = elmTarget.attr('qtiptitle');
if (strTitle == undefined)
{
strTitle = false;
}
//Title Button
var binTitleButton = elmTarget.attr('qtipbutton');
if (binTitleButton == undefined)
{
binTitleButton = false;
}
//Show
var strShow = elmTarget.attr('qtipshow');
if (strShow == undefined)
{
strShow = 'click';
}
if (strShow == 'false')
{
strShow = false;
}
//Hide
var strHide = elmTarget.attr('qtiphide');
if (strHide == undefined)
{
strHide = 'unfocus';
}
if (strHide == 'false')
{
strHide = false;
}
//Modal
var binModal = elmTarget.attr('qtipmodal');
var binBlur = false;
if (binModal == undefined)
{
binModal = false;
}
else if (strHide == 'unfocus')
{
binBlur = true;
}
//Tip Height / width
var intTipWidth = elmTarget.attr('qtiptipwidth');
if (intTipWidth == undefined)
{
intTipWidth = 6;
}
var intTipHeight = elmTarget.attr('qtiptipheight');
if (intTipHeight == undefined)
{
intTipHeight = 6;
}
//Style
var strStyle = elmTarget.attr('qtipstyle');
if (strStyle == undefined)
{
strStyle = '';
}
//____________________________________________________
//Set qtip
$(this).qtip
(
{
overwrite: false,
content:
{
text: function (event, api)
{
var strId = $(this).attr('qtipiddiv');
return ($('#' + strId));
},
title:
{
text: strTitle,
button: binTitleButton
}
},
show:
{
event: strShow,
effect: function (offset)
{
var strFade = offset.target.attr('qtipfade');
if (strFade == undefined)
{
$(this).fadeIn(0);
}
else
{
var intFade = parseInt(strFade);
$(this).fadeIn(intFade);
}
},
solo: true,
modal:
{
on: binModal,
blur: binBlur
}
},
hide:
{
event: strHide
},
position:
{
viewport: $(window),
adjust:
{
screen: true
}
},
style:
{
classes: 'qtip-rounded qtip-shadow ' + strStyle,
tip:
{
width: intTipWidth,
height: intTipHeight
}
},
events:
{
show: function (event, api)
{
//Position
var elmTarget = $(api.elements.target[0]);
var strPositionMy = elmTarget.attr('qtippositionmy');
if (strPositionMy != undefined)
{
elmTarget.qtip('option', 'position.my', strPositionMy);
}
var strPositionAt = elmTarget.attr('qtippositionat');
if (strPositionAt != undefined)
{
elmTarget.qtip('option', 'position.at', strPositionAt);
}
//Height / width
var strWidth = elmTarget.attr('qtipwidth');
if (strWidth != undefined)
{
elmTarget.qtip('option', 'style.width', strWidth);
}
var strHeight = elmTarget.attr('qtipheight');
if (strHeight != undefined)
{
elmTarget.qtip('option', 'style.height', strHeight);
}
}
}
}
)
}
);
return;
}