HTML 툴팁 (제목 속성)의 형식을 지정할 수 있습니까?
이 질문에 이미 답변이 있습니다.
HTML 툴팁의 형식을 지정할 수 있습니까?
예를 들어, title = "foo!"속성을 가진 DIV가 있습니다. 브라우저의 텍스트 크기를 확대 또는 축소해도 툴팁의 텍스트 크기는 변경되지 않습니다. 브라우저 설정으로 툴팁 글꼴 크기를 만드는 방법이 있습니까?
아니요.하지만 이러한 자유를 허용하는 Overlib 및 jQuery 와 같은 다른 옵션 이 있습니다.
- jTip : http://www.codylindley.com/blogstuff/js/jtip/
- jQuery 툴팁 : https://jqueryui.com/tooltip/
개인적으로 jQuery를 취할 경로로 제안합니다. 일반적으로 매우 눈에 거슬리지 않으며 사이트의 마크 업에 추가 설정이 필요하지 않습니다 (<head>에 jquery 스크립트 태그를 추가하는 경우는 예외).

CR, 
LF 및 	TAB 과 같은 엔티티 코드를 사용해보십시오 .
예를 들면 :
<div title="1)	A
2)	B">Hover Me</div>CSS와 트릭 (자바 스크립트 없음)을 사용하여 수행 할 수있는 것 같습니다.
http://davidwalsh.name/css-tooltips
http://www.menucool.com/tooltip/css-tooltip
http://sixrevisions.com/css/css-only-tooltips/
결코 늦지 않는 것이 좋습니다. 그들은 항상 말합니다.
일반적으로 이러한 상황을 해결하기 위해 jQuery를 사용합니다. 그러나 자바 스크립트가없는 솔루션이 필요한 클라이언트 사이트에서 작업 할 때 다음을 생각해 냈습니다.
<div class="hover-container">
<div class="hover-content">
<p>Content with<br />
normal formatting</p>
</div>
</div>
다음 CSS를 사용하면 제목과 동일한 상황이 발생합니다.
.hover-container {
position: relative;
}
.hover-content {
position: absolute;
bottom: -10px;
right: 10px;
display: none;
}
.hover-container:hover .hover-content {
display: block;
}
이를 통해 필요에 따라 스타일을 지정할 수 있으며 모든 브라우저에서 작동합니다. 자바 스크립트가 비활성화 된 경우에도 마찬가지입니다.
장점 :
- 당신은 스타일링에 많은 영향을 미칩니다.
- 거의 모든 브라우저에서 작동합니다.
단점 :
- 툴팁을 배치하기가 더 어렵습니다.
아니요, 불가능합니다. 브라우저에는 고유 한 방법으로 툴팁을 구현할 수 있습니다. 할 수있는 일은 자바 스크립트를 사용하여 HTML 툴팁 (대부분 '호버에 표시')처럼 작동하는 div를 만든 다음 원하는 방식으로 스타일을 지정하는 것입니다.
이렇게하면 툴팁 div 내부의 텍스트가 실제 HTML이므로 그에 따라 크기가 조정되므로 브라우저의 확대 또는 축소에 대해 걱정할 필요가 없습니다.
좋은 리소스는 Jonathan의 게시물 을 참조하십시오 .
Mootools 는 또한 'more builder'에서 사용할 수있는 멋진 'Tips'클래스를 제공합니다.
모든 브라우저 또는 타사 도구에서 작동하는지 확실하지 않지만 새 줄 도구 설명에 "\ n"을 지정하는 데 성공했습니다. 최소한 ie11, firefox 및 chrome에서 dhtmlx와 함께 작동합니다.
for (var key in oPendingData) {
var obj = oPendingData[key];
this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}
모든 네이티브 제목 툴팁을 양식화 된 노드로 변환하는이 작은 자바 스크립트 함수를 작성했습니다. http://jsfiddle.net/BurakUeda/g8r8L4vt/1/
mo_title = null;
mo_element = null;
document.onmousemove = function (e) {
var event = e || window.event;
var current_title;
var moposx = e.pageX; // current
var moposy = e.pageY; // mouse positions
var tooltips = document.getElementById("tooltips"); // element for displaying stylized tooltips (div, span etc.)
var current_element = event.target || event.srcElement; // the element we're currently hovering
if (current_element == mo_element) return; // we're still hovering the same element, so ignore
if(current_element.title){
current_title = current_element.title;
} else {
current_title = "-_-_-"; // if current element has no title,
current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
}
if(mo_element == null){ // this is our first element
mo_element = current_element;
mo_title = current_title;
}
if(mo_title) mo_element.title = mo_title; // restore the title of the previous element
mo_element = current_element; // set current values
mo_title = current_title; // as default
if(mo_element.title){
var mo_current_title = mo_element.title; // save the element title
mo_element.title = ""; // set it to none so it won't show over our stylized tooltip
if(mo_current_title == "-_-_-"){ // if the title is fake, don't display it
tooltips.style.display = "none";
tooltips.style.left = "0px";
tooltips.style.left = "0px";
tooltips.innerHTML = "";
} else {
tooltips.style.display = "inline-block";
tooltips.style.left = (moposx + 10) + "px";
tooltips.style.top = (moposy + 10) + "px";
tooltips.innerHTML = mo_current_title;
}
}
};#tooltips {
display: none;
position: absolute;
left 0;
top: 0;
color: white;
background-color: darkorange;
box-shadow: black 2px 2px 2px;
padding: 5px;
border-radius:5px;
}
#buttoncontainer{
border: 1px black solid;
padding: 10px;
margin: 5px;
}<div id="tooltips"></div>
<div>
<div title="DIV #1">Division 1</div>
<div id="buttoncontainer" title="Button container">
<button title="Button with title"> Button #1 </button>
<button> Button w/o title </button>
<button title="
<table border='1' cellpadding='4' cellspacing='0'>
<tr>
<td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td>
<td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td>
</tr>
<tr>
<td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td>
<td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td>
</tr>
<tr>
<td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td>
<td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td>
</tr>
</table>
"> Button title containing HTML </button>
</div>
</div장점 :
- 아무것도 변환 할 필요가 없습니다. 기본 제목 속성으로 일반적인 HTML을 작성하십시오.
- 제목 툴팁에서 HTML 태그와 인라인 스타일을 사용할 수 있습니다. (자체 스타일로 제목에 전체 HTML 표가있는 예제 참조)
단점 :
- 자바 스크립트입니다
- 존재하는 모든 브라우저에서 테스트되지는 않았지만 최신 버전의 Chrome, FF, IE 및 Opera에서 잘 작동합니다.
It probably can be written more elegantly and may have a few lines that is unnecessary.
Also, stackoverflow code snippet thingy cannot parse the HTML code correctly, so check it on the jsfiddle link I provided.
I know this is an old post but I would like to add my answer for future reference. I use jQuery and css to style my tooltips: easiest-tooltip-and-image-preview-using-jquery (for a demo: http://cssglobe.com/lab/tooltip/02/) On my static websites this just worked great. However, during migrating to Wordpress it stopped. My solution was to change tags like <br> and <span> into this: <br> and <span> This works for me.
In bootstrap tooltip just use data-html="true"
참고URL : https://stackoverflow.com/questions/484137/is-it-possible-to-format-an-html-tooltip-title-attribute
'IT TIP' 카테고리의 다른 글
| Imshow : 범위 및 측면 (0) | 2020.10.16 |
|---|---|
| phpunit에 실패시 중지하는 방법 (0) | 2020.10.16 |
| Tinyint 대 Bit? (0) | 2020.10.16 |
| 자식은 다른 저장소를 병합합니까? (0) | 2020.10.16 |
| Eclipse : Java 1.7 (언 바운드 라이브러리)에 대한 좌절 (0) | 2020.10.16 |