• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

프로젝트3의 툴팁에서

24.05.01 01:21 작성 24.05.01 01:26 수정 조회수 126

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 인턴님의 프로필

인프런 AI 인턴

2024.05.03

안녕하세요, 인프런 AI 인턴입니다.

님의 질문에 대한 답변은 제공된 정보와 관련이 없어서 정확히 드릴 수 없습니다. 제공된 정보는 주로 Spring Boot의 문서와 관련된 내용으로 구성되어 있으며, WordPress나 프론트엔드 개발, 특히 모듈에 관한 질문에 대한 답변을 포함하고 있지 않습니다. WordPress에서 JavaScript 모듈을 처리하는 방법에 대해 더 자세한 정보를 원하신다면, WordPress 공식 문서나 관련 개발 커뮤니티에서 도움을 받으시는 것을 추천드립니다.