인프런 커뮤니티 질문&답변
작성한 질문수
프로젝트3의 툴팁에서
작성
·
248
·
수정됨
1
프로젝트3의 툴팁부분
main.js을 bsComponent.js파일로 나눌때
<script type="module" src="assets/js/main.js"></srcipt> 에 type="module"을 넣게되면
나중에 wordpress로 만드는 작업을 하면서 function.php파일에 이 모듈부분을 어떻게 넣을수 있는지 잘 모르겠네요.
모듈부분때문인지 정상적으로 tooltip부분이 정상적으로 나오질 않습니다.ㅠㅠ
즉, wordpress에서는 모듈화를 어떻게 처리해야할까요?
답변 2
0
네. 안녕하세요.
답변이 늦어 죄송합니다.
functions.php 파일에 아래 코드를 추가해주세요.
// Add type module to script
add_filter('script_loader_tag', 'add_type_attribute', 10, 3);
function add_type_attribute($tag, $handle, $src) {
// if not app-js script, do nothing and return original $tag
if ('main-script' !== $handle) { return $tag; }
// change the script tag by adding type="module" and return it.
$tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
return $tag;
}
그리고 main.js 파일에
import { bsComponents } from './modules/bsComponents.js'
라고 import 시켜 준 다음
bsComponents()
라고 함수를 호출해주세요.
물론 bsComponents.js에는 툴팁을 사용할 수 있는 부트스트랩 함수를 작성해 주셔야 합니다.
export function bsComponents() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
}
이렇게 하시면 됩니다.(부트스트랩 툴팁 페이지 참조)
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
님의 질문에 대한 답변은 제공된 정보와 관련이 없어서 정확히 드릴 수 없습니다. 제공된 정보는 주로 Spring Boot의 문서와 관련된 내용으로 구성되어 있으며, WordPress나 프론트엔드 개발, 특히 모듈에 관한 질문에 대한 답변을 포함하고 있지 않습니다. WordPress에서 JavaScript 모듈을 처리하는 방법에 대해 더 자세한 정보를 원하신다면, WordPress 공식 문서나 관련 개발 커뮤니티에서 도움을 받으시는 것을 추천드립니다.