미디어위키:Common.js: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
(문서를 비움) 태그: 비우기 |
잔글편집 요약 없음 태그: 되돌려진 기여 |
||
1번째 줄: | 1번째 줄: | ||
mw.hook('wikipage.content').add(function($content) { | |||
// 모든 주석 <sup> 태그 선택 | |||
const refs = $content.find('sup.reference'); | |||
refs.each(function() { | |||
const $ref = $(this); | |||
const refId = $ref.find('a').attr('href'); // <a> 태그의 href 속성에서 ID 가져오기 | |||
if (refId) { | |||
const refContent = $(refId).html(); // 주석 내용 가져오기 | |||
// 팝업용 컨테이너 생성 | |||
const $tooltip = $('<div>') | |||
.addClass('ref-tooltip') | |||
.html(refContent) | |||
.css({ | |||
display: 'none', | |||
position: 'absolute', | |||
border: '1px solid #ccc', | |||
background: '#fff', | |||
padding: '10px', | |||
'z-index': 1000, | |||
'box-shadow': '0 4px 8px rgba(0,0,0,0.1)', | |||
}); | |||
// 팝업을 DOM에 추가 | |||
$('body').append($tooltip); | |||
// 마우스 이벤트 처리 | |||
$ref.on('mouseenter', function(event) { | |||
$tooltip.css({ | |||
top: event.pageY + 10, | |||
left: event.pageX + 10, | |||
}).fadeIn(200); | |||
}); | |||
$ref.on('mousemove', function(event) { | |||
$tooltip.css({ | |||
top: event.pageY + 10, | |||
left: event.pageX + 10, | |||
}); | |||
}); | |||
$ref.on('mouseleave', function() { | |||
$tooltip.fadeOut(200); | |||
}); | |||
} | |||
}); | |||
}); |
2025년 1월 17일 (금) 18:17 판
mw.hook('wikipage.content').add(function($content) {
// 모든 주석 <sup> 태그 선택
const refs = $content.find('sup.reference');
refs.each(function() {
const $ref = $(this);
const refId = $ref.find('a').attr('href'); // <a> 태그의 href 속성에서 ID 가져오기
if (refId) {
const refContent = $(refId).html(); // 주석 내용 가져오기
// 팝업용 컨테이너 생성
const $tooltip = $('<div>')
.addClass('ref-tooltip')
.html(refContent)
.css({
display: 'none',
position: 'absolute',
border: '1px solid #ccc',
background: '#fff',
padding: '10px',
'z-index': 1000,
'box-shadow': '0 4px 8px rgba(0,0,0,0.1)',
});
// 팝업을 DOM에 추가
$('body').append($tooltip);
// 마우스 이벤트 처리
$ref.on('mouseenter', function(event) {
$tooltip.css({
top: event.pageY + 10,
left: event.pageX + 10,
}).fadeIn(200);
});
$ref.on('mousemove', function(event) {
$tooltip.css({
top: event.pageY + 10,
left: event.pageX + 10,
});
});
$ref.on('mouseleave', function() {
$tooltip.fadeOut(200);
});
}
});
});