스팬 요소에 툴팁을 어떻게 추가합니까?

다음 코드에서 사용자가 스팬을 가리킬 때 툴팁이 나타나기를 원합니다. 어떻게합니까? 링크를 사용하고 싶지 않습니다.

<span> text </span>

간단하고 내장 된 방법은 다음과 같습니다.

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

일반 텍스트 툴팁을 제공합니다. 서식이 지정된 HTML이 포함 된 풍부한 툴팁을 원한다면 라이브러리를 사용해야합니다. 다행히도 많은 것들이 있습니다.

순수 CSS를 사용한 사용자 정의 툴팁-JavaScript 필요 없음 :

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

기본 title속성 툴팁 대신 :before/ :after pseudo 요소 및 HTML5 data-*속성을 사용하여 사용자 정의 CSS 툴팁을 만들 수 있습니다 .

제공된 CSS를 사용하여 data-tooltip속성을 사용하여 요소에 툴팁을 추가 할 수 있습니다 .

data-tooltip-position속성 (허용되는 값 : top/ right/ bottom/ left)을 사용하여 사용자 정의 툴팁의 위치를 ​​제어 할 수도 있습니다 .

예를 들어, 다음은 스팬 요소의 맨 아래에 툴탑을 추가합니다.

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

어떻게 작동합니까?

attr()함수를 사용하여 사용자 정의 속성 값을 검색하여 의사 요소가 포함 된 사용자 정의 툴팁을 표시 할 수 있습니다 .

[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;
}

대부분의 브라우저에서 title 속성은 툴팁으로 렌더링되며 일반적으로 작동하는 요소의 종류에 따라 유연합니다.

<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>

"title"당신이 약간의 사용을 고려에 스타일을 적용 할 경우 속성은 브라우저에 의해 툴팁의 텍스트로 사용되는 플러그인을