В моем веб-приложении .Net у меня есть некоторые элементы с классом «skmTooltipHost», которые динамически размещаются на странице.My JQuery show() работает в IE, но не FF?
Когда мышка нависает над ними, отображается всплывающее окно с подсказкой. Это отлично работает в IE, но совсем не в Firefox.
Пожалуйста, помогите!
Javascript, который делает "On Hover и шоу"
$(document).ready(function() {
$(".skmTooltipHost").hover(function() {
$(this).empty().append('<div class="skmTooltipContainer"><strong>hello</strong>' + $(this).attr('tooltip') + '</div>');
$(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20);
$(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height());
$(".skmTooltipContainer").css("display", "inline-block");
$(".skmTooltipContainer").show();
$(this).show();
},function() {
$(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(this).remove(); });
});
});
Моя CSS
.skmTooltipHost
{
cursor: help;
border-bottom: dotted 1px brown;
}
.skmTooltipContainer
{
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
display:inline-block;
position: absolute!important;
background-color: #ff9;
border: solid 1px #333;
z-index: 999;
}
Редактировать
Я наконец использовал множество различных, но подобный код, который делает Работа. Я не уверен, в чем разница. Мой рабочий код ниже:
function simple_tooltip(target_items, name) {
$(target_items).each(function (i) {
$("body").append("<div class='" + name + "' id='" + name + i + "'><p>Click for a link to the run details</br><strong>Server: </strong>" + $(this).attr('title') + "</br><strong>Information:</strong>" + $(this).attr('error') + "</p></div>");
var my_tooltip = $("#" + name + i);
$(this).removeAttr("title").mouseover(function() {
my_tooltip.css({ opacity: 0.8, display: "none" }).fadeIn(100);
}).mousemove(function (kmouse) {
my_tooltip.css({ left: kmouse.pageX + 15, top: kmouse.pageY + 15 });
}).mouseout(function() {
my_tooltip.fadeOut(100);
});
});
}
$(document).ready(function() {
simple_tooltip($(".skmTooltipHost"), "tooltip");
});
.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:2px;
border:1px solid #fff;
width:250px;
}
.tooltip p{
margin:0;
padding:0;
color:black;
background-color:white;
padding:2px 7px;
}
На самом деле эти две строки ничего не делают прямо сейчас, я просто добавил их, чтобы попробовать. Они, похоже, не влияют на функциональность вообще. Все еще работает в IE. Не в FF. $ (". skmTooltipContainer"). css ("display", "inline-block"); $ (this) .show(); – mplace
Вы пытались добавить позиционирование в свой '.skmTooltipHost' (например,' position: relative; ')? – MassivePenguin
попробуйте использовать '.on' для запуска' hover'. – Red