HTML에 툴팁을 쉽게 삽입하는 방법은 무엇입니까?

코드를 너무 많이 쓰지 않고 구문에 HTML의 툴팁을 삽입하는 방법을 아는 사람이 있습니까?HTML에 툴팁을 쉽게 삽입하는 방법은 무엇입니까?

아이디어는 거대한 코드 블록이 아니라 상대적으로 짧고 쉽게 삽입 할 수 있어야한다는 아이디어입니다.

상상 예 : <p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>

목적은 단어 나 문장의 의미를 설명하는 툴팁을 추가, 기사를 작성하는 경우에 대한,하지만 많은 노력을 필요로하거나, 코드에 너무 많은 공간을 차지하지 않고있다 .

내가 찾은 대안 중 하나가 this이지만 코드가 너무 커서 많은 공간이 필요하며 여러 구문에이 방법을 적용하는 방법을 알지 못합니다. 모든 div에 대해 div를 추가해야하는 것처럼 보입니다. 표시하려는 툴팁.

나는 이미 <a href="#" title="A yellow fruit"> Bannana </a>에 대해 알고 있지만 스타일을 허용하지 않으며 휴대 전화에 표시되지 않습니다.

출처

2016-12-06 Tony TCG

이것 좀보세요.

이

<html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 1s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <body style="text-align:center;"> <h2>Tooltip</h2> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> <br/> <br/> <div class="tooltip">Hover over me2 <span class="tooltiptext">Tooltip text again</span> </div> <br/> <br/> <div class="tooltip">Hover over me3 <p class="tooltiptext">Tooltip text</p> </div> <br/> <br/> <div class="tooltip">Hover over me <h1 class="tooltiptext">Tooltip text</h1> </div> <br/> <br/> <div class="tooltip">Hover over me <h2 class="tooltiptext">Tooltip text</h2> </div> </body> </html>

는 W3schools의 예의입니다. 그냥 거기에있는 모든 CSS는 필요하지 않습니다, 당신은 툴팁을 실제로 작동하게하기 위해 약간이 필요합니다.

출처

2016-12-06 04:18:56

는 여러 문구에 대해 여러 툴팁을 보여주는 단락으로이의 예를 들어 주실 수 있습니까? –

@Tony TCG 예. 나를 편집 해 보겠습니다. –

@Tony TCG 더 많은 예제를 추가했습니다. –

각도가 비슷한 지시어를 기반으로하는 라이브러리가 필요합니다. 툴팁의 모든 부분은 사용법 대신 html로 직접 설명 될 수 있습니다. 사용의 https://angular-ui.github.io/bootstrap/#/popover

예 :에서 봐

<button uib-popover="I appeared on mouse enter!" 
popover-trigger="'mouseenter'" type="button">Mouseenter</button>

출처

2016-12-06 04:26:43

이를 시도하십시오.

.tooltip { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.tooltip:after { 
 
    position: absolute; 
 
    background: rgba(140,180,140,.5); 
 
    content: attr(data-tooltip);  
 
    bottom: 100%; 
 
    left: 0; 
 
    max-width: 200px; 
 
    opacity: 0; 
 
    transition: all ease .3s; 
 
    padding: 5px; 
 
    border-radius: 7px; 
 
} 
 

 
.tooltip:hover:after { 
 
    opacity: 1; 
 
}

<h1>Tooltip Example</h1> 
 
<div class="tooltip" data-tooltip="My tips"> 
 
    Hover over me 
 
<div>

출처

2016-12-06 05:41:10 Nooh

내가 그 위에 마우스를 올렸을 때 작동하지 않습니다. @Nooh –

그것이 저에게 효과적입니다. – Nooh

HTML에 툴팁을 쉽게 삽입하는 방법은 무엇입니까?

답변

관련 문제