스팬 요소에 도구 팁을 추가하려면 어떻게 해야 합니까?

스팬 요소에 도구 팁을 추가하려면 어떻게 해야 합니까?

다음 코드에서 사용자가 스팬을 호버할 때 툴팁이 뜨길 원하는데, 어떻게 해야 하나요?링크를 사용하고 싶지 않습니다.

<span> text </span>

간단한 기본 제공 방법은 다음과 같습니다.

<span title="My tip">text</span>

그러면 일반 텍스트 도구 설명이 제공됩니다.서식이 지정된 HTML과 함께 풍부한 도구 설명을 사용하려면 라이브러리를 사용해야 합니다.다행히도 그런 것들이 많이 있습니다.

순수 CSS가 포함된 사용자 지정 툴팁 - JavaScript가 필요하지 않음:

여기 예(코드 포함) / 전체 화면 예

기본값에 대한 대안으로title속성 툴팁, 당신은 당신만의 사용자 정의 CSS 툴팁을 만들 수 있습니다.:before/:after 유사 요소 및 HTML5 특성.

제공된 CSS를 사용하여 요소에 도구 설명을 추가할 수 있습니다.data-tooltip기여하다.

또한 사용자 정의 도구 설명의 위치를 제어할 수 있습니다.data-tooltip-position속성(지정된 값:top/right/bottom/left).

예를 들어, 다음은 스팬 요소의 하단에 위치한 툴 탑을 추가합니다.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

이것은 어떻게 작동합니까?

함수를 사용하여 사용자 지정 특성 값을 검색하여 유사 요소가 포함된 사용자 지정 도구 설명을 표시할 수 있습니다.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

도구 설명을 배치할 때는 속성 선택기를 사용하고 속성 값을 기준으로 배치를 변경합니다.

여기 예(코드 포함) / 전체 화면 예

예제에 사용된 전체 CSS - 필요에 따라 사용자 정의

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

대부분의 브라우저에서 제목 속성은 도구 설명으로 렌더링되며 일반적으로 어떤 종류의 요소와 함께 작동할지에 대해 유연합니다.

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

이러한 모든 기능은 대부분의 브라우저에서 툴팁을 렌더링합니다.

기본 도구 설명의 경우 다음을 수행합니다.

<span title="This is my tooltip"> Hover on me to see tooltip! </span>

이 속성은 브라우저에서 도구 설명 텍스트로 사용됩니다.스타일을 적용하려면 jQuery UI와 같은 일부 라이브러리를 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element