IE에서 jQuery removeAttr()가 적용되지 않는 문제
오늘도 출근해서 열심히 코딩 작업 중인데.. DIV 태그 안에 title 속성을 줬더니 마우스 오버시 툴팁으로 보여진다.
아래 그림처럼 그래프에서 방문자수를 표시하는 것인데.. title 속성에 방문자수를 저장해서 jQuery를 이용해서
방문자수를 레이어를 보여주는 것인데 툴팁이 보이는 것은 도무지 용서가 되지 않아서 머리를 좀 써봤는데.. ㅋ
그래프 위쪽으로 나오는 것만 있으면 되는데.. 툴팁은 정말 아닌 것 같아서 jQuery removeAttr()를 이용해서
title 속성을 제거해봤는데.. 그래도 계속 표시가 되는 것이다. 아래는 처음에 시도했던 JS 코드의 일부분이다.
$(function() {
$(‘#GraphArea .graph_area div[id^=graph]’).hover(
function(e) {
var pos = $(this).position();
var left = pos.left – 40;
var top = pos.top – 55;
var info = $(this).attr(“title”).replace(“일 “, “일<br />”).replace(“:”, “:<span>”).replace(“명”, “명</span>”);
$(this).data(“title”, $(this).attr(“title”)).removeAttr(“title”);
$(‘div.infoPopup div.info’).empty().html(info);
$(‘div.infoPopup’).css(“left”, left).css(“top”, top).show();
},
function() {
$(this).attr(“title”, $(this).data(“title”));
$(‘div.infoPopup’).hide();
}
);
});
jQuery data()를 이용해서 속성 제거 전 값을 저장하고 마우스가 영역을 벗어나면 다시 속성을 지정해 주는 식으로
구성을 했는데.. 이렇게 해도 IE 환경에서는 보기싫은 툴팁이 사라지지 않아서 아래처럼 약간 코드를 수정해봤다.
$(function() {
$(‘#GraphArea .graph_area div[id^=graph]’).hover(
function(e) {
var pos = $(this).position();
var left = pos.left – 40;
var top = pos.top – 55;
var info = $(this).attr(“title”).replace(“일 “, “일<br />”).replace(“:”, “:<span>”).replace(“명”, “명</span>”);
$(this).data(“title”, $(this).attr(“title”)).attr(“title”, “”);
$(‘div.infoPopup div.info’).empty().html(info);
$(‘div.infoPopup’).css(“left”, left).css(“top”, top).show();
},
function() {
$(this).attr(“title”, $(this).data(“title”));
$(‘div.infoPopup’).hide();
}
);
});
속성을 제거하는 대신 속성 값을 없애주니까 더 이상 툴팁이 표시가 되지 않았다. 이게 맞는 방법인지는 모르겠다.