툴팁을 만드는 방법.

10142 단어 tutorialwebdevhtmljavascript

도구 설명!



내 웹 사이트에 대한 몇 가지 툴팁을 원했습니다.

문제는 도구 설명에 대한 온라인 자습서가 마우스 커서를 따라가는 텍스트와 함께 실제로 도구 설명처럼 작동하지 않는다는 것입니다.

내가 원하는 방식으로 테마를 작동시키는 방법을 알아내는데 3시간을 보냈습니다.

나는 다음과 같은 것을 생각해 냈습니다.
  • 은 다른 모든 자습서
    • 보다 훨씬 간단합니다.
  • 이 다른 모든 튜토리얼
    • 보다 좋아 보입니다.

    HTML



    도구 설명을 포함하려는 모든 요소에 tooltip 속성을 추가합니다.

    이 속성의 값은 원하는 도구 설명 텍스트여야 합니다. 여기에서 HTML을 사용할 수 있습니다.

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script src="index.js"></script>
    </head>
    <body>
        <a tooltip="Example Tooltip Text A" href="www.example.com">A</a>
        <a tooltip="Different<br>Tooltip<br>Text" href="www.otherExample.com">B</a>
        <a tooltip="Really Cool Site" href="f53.dev">C</a>
    </body>
</html>


    또한 자바스크립트 파일을 어딘가에 연결해야 합니다.

    CSS



    툴팁을 올바르게 렌더링하려면 아주 적은 양의 CSS가 필요합니다.

    body {
    /* Required Stuff */
    position: relative;

    /* Styling that fits tooltip example styling */
    background: #1c1c1c;
}

#tooltip {
    /* Required Stuff */
    position: absolute;
    pointer-events: none;
    z-index: 100; /* anything higher than the highest z index you use */
    visibility: hidden;

    /* Example of how to style your tooltip */
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    color: white;
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
}


    JS



    이것의 고기는 자바 스크립트에 있으므로 여기에서 천천히 분해하겠습니다.

    내가 권장한 대로 스크립트를 헤더에 넣으면 모든 코드를 이 안에 래핑해야 합니다.

    addEventListener('DOMContentLoaded', () => {
    // Everything
})


    툴팁을 표시하고 본문에 추가해야 합니다.

    // Make our tooltip
let tooltip = document.createElement("span")
tooltip.id = "tooltip"
document.body.appendChild(tooltip)


    툴팁이 있는 모든 요소에 대해 이벤트 리스너를 추가하여 모든 것을 처리할 함수를 호출합니다.

    // add event listeners to elements that have a tooltip
document.querySelectorAll("[tooltip]").forEach(element => {
    element.addEventListener("mouseenter", updateTooltip)
    element.addEventListener("mouseleave", updateTooltip)
    element.addEventListener("mousemove", updateTooltip)
})


    그런 다음 해당 이벤트 리스너가 호출하는 함수를 만들기만 하면 됩니다.

    function updateTooltip(mouseEvent) {
    // Move tooltip to our current cursor position
    tooltip.style.top = mouseEvent.pageY+"px"
    tooltip.style.left = mouseEvent.pageX+"px"

    switch(mouseEvent.type) {
    case "mouseenter":
        // update text and show tooltip when we hover
        tooltip.innerHTML = this.getAttribute("tooltip")
        tooltip.style.visibility = "visible"
        break;
    case "mouseleave":
        // hide the tooltip when we are no longer above a tooltip element
        tooltip.style.visibility = "hidden"
        break;
    }
}


    결론 및 데모



    그게 다야!

    이에 대한 코드를 가지고 놀 수 있습니다here.
    함수의 인수
    자습서: 어디서나 원격으로 Raspberry Pi에 액세스하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage