미디어위키:Common.js

WONGO
고대진 (토론 | 기여)님의 2025년 1월 18일 (토) 09:26 판
둘러보기로 이동 검색으로 이동

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 오페라: Ctrl-F5를 입력.
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);
            });
        }
    });
});