예:

<a href="example.com" title="My site"> Link </a>

브라우저에서 "title"속성의 표시를 어떻게 변경합니까? 기본적으로 노란색 배경과 작은 글꼴이 있습니다. 더 크게 만들고 배경색을 변경하고 싶습니다.

제목 속성의 스타일을 지정하는 CSS 방법이 있습니까?

방법은 다음과 같습니다.

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

실제로 CSS attr표현, 컨텐츠 및 속성 선택기 (IE8과는 거리가 멀다는 것을 암시) 만 요구하는 순수한 CSS 솔루션이있는 것 같습니다 .

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

출처 : https://jsfiddle.net/z42r2vv0/2/

@ViROscar의 입력으로 업데이트 : 위의 예제에서 "title"속성을 사용했지만 특정 속성을 사용할 필요는 없습니다. 실제로 CSS의 이점을 누릴 수없는 사용자가 내용에 액세스 할 가능성이 있으므로 "alt"속성을 사용하는 것이 좋습니다.

다시 업데이트 "title"속성은 기본적으로 "tooltip"속성을 의미하기 때문에 코드를 변경하지 않습니다. 호버에서만 액세스 할 수있는 필드 안에 중요한 텍스트를 숨기는 것은 좋지 않습니다. 이 텍스트에 액세스 할 수있게하려면 "aria-label"속성이 가장 적합한 위치 인 것 같습니다 : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

실제 title속성을 스타일링 할 수 없습니다

title속성 의 텍스트 가 표시되는 방식은 브라우저에 의해 정의되며 브라우저마다 다릅니다. 웹 페이지가 title속성을 기반으로 브라우저가 표시하는 툴팁에 스타일을 적용하는 것은 불가능 합니다.

그러나 다른 속성을 사용하여 매우 유사한 것을 만들 수 있습니다.

당신은 (예를 CSS와 의사 툴팁 및 사용자 지정 특성을 만들 수 있습니다 data-title)

이를 위해 data-title속성을 사용 합니다. data-*속성 은 DOM 요소 / HTML에 사용자 정의 데이터를 저장하는 방법입니다. 있다 그들에 액세스하는 방법은 여러 가지 . 중요한 것은 CSS로 선택할 수 있다는 것입니다.

당신이 가진 요소를 선택하기 위해 CSS를 사용할 수있는 점을 감안 data-title하면 다음 생성하는 CSS를 사용하여 속성 :after(또는 :before) content속성의 값을 사용하여 포함 된attr() .

스타일 툴팁 예제

더 크고 다른 배경색으로 (질문의 요청에 따라) :

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

보다 정교한 스타일링 ( 이 블로그 게시물에서 수정 ) :

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

알려진 문제

실제와 달리 title 툴팁 위 CSS에서 생성 된 툴팁은 반드시 페이지에서 볼 수있는 것은 아닙니다 (즉, 가시 영역 밖에있을 수 있음). 반면에 현재 창 내에있을 수 있지만 실제 툴팁에는 해당되지 않습니다.

또한 의사 툴팁은 마우스가 해당 요소에있는 위치보다 의사 툴팁이있는 요소에 상대적으로 배치됩니다. 의사 툴팁이 표시되는 위치를 미세 조정할 수 있습니다. 요소와 관련하여 알려진 위치에 표시되는 것은 상황에 따라 이점이 될 수도 있고 단점이 될 수도 있습니다.

당신은 사용할 수 없습니다 :before또는:after컨테이너가 아닌 요소 요소를

이 답변에는 "입력 필드에 : before 또는 : after pseudo-element를 사용할 수 있습니까?" 에 대한 좋은 설명 이 있습니다.

효과적으로, 당신은 같은 요소를 직접이 방법을 사용할 수 없다는이 수단 <input type="text"/>, <textarea/>, <img>, 등 쉬운 해결책은에 컨테이너 아니다 요소를 래핑하는 것입니다 <span>또는 <div>용기에 의사 툴팁이있다.

<span>컨테이너가 아닌 요소를 래핑 할 때 의사 툴팁을 사용하는 예 :

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{위에 링크 된 블로그 게시물의 코드 (여기서 처음으로 표절 한 답변을 보았습니다)에서 data-*속성 대신 속성 을 사용하는 것이 분명했습니다 title. 그렇게하는 것은 그 (지금 삭제 된) 답변에 대한 snostorm 의 의견에서도 제안되었습니다 .}

CSS는 툴팁 모양을 변경할 수 없습니다. 브라우저 / OS에 따라 다릅니다. 다른 것을 원한다면 기본 툴팁 대신 요소 위로 마우스를 가져갈 때 자바 스크립트를 사용하여 마크 업을 생성해야합니다.

20 줄 JavaScript 솔루션을 여기에 게시한다고 생각했습니다. 완벽하지는 않지만 툴팁에서 필요한 내용에 따라 일부에는 유용 ​​할 수 있습니다.

사용시기

• TITLE속성이 정의 된 모든 HTML 요소에 대한 툴팁의 스타일을 자동 으로 지정합니다 (향후 문서에 동적으로 추가 된 요소 포함)
• 모든 툴팁에 Javascript / HTML 변경 또는 해킹이 필요하지 않습니다 ( TITLE속성 만으로 의미가 명확함)
• 매우 가벼움 (약 300 바이트 압축 및 축소)
• 당신은 매우 기본적인 스타일 툴팁 만 원합니다

사용하지 않을 때

• jQuery가 필요하므로 jQuery를 사용하지 않는 경우 사용하지 마십시오
• 툴팁이있는 중첩 요소에 대한 잘못된 지원
• 화면에 동시에 둘 이상의 툴팁이 필요합니다
• 일정 시간이 지나면 툴팁이 사라져야합니다.

코드

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

DOM을 준비하기 전에이 코드를 실행하더라도 DOM을 준비 할 때까지 툴팁을 표시하지 않습니다.

커스터마이즈

var두 번째 줄 에서 선언을 변경하여 약간 사용자 지정할 수 있습니다.

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

스타일

다음 CSS를 사용하여 툴팁의 스타일을 지정할 수 있습니다.

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

나는 여기에 답을 찾았습니다 : http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

내 코드는 다음과 같습니다. 속성 이름을 변경했습니다. 동일한 텍스트에 대해 두 개의 팝업이있는 속성의 제목 이름을 유지하면 다른 변경 사항은 호버링의 텍스트가 노출 된 텍스트 아래에 표시된다는 것입니다.

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(glose);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

사용자 정의 툴팁 패턴을위한 jsfiddle은 다음과 같습니다.

CSS 포지셔닝 및 pseduo 클래스 선택기를 기반으로합니다.

의사 클래스의 브라우저 간 지원에 대한 MDN 문서 확인

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

기본 툴팁은 스타일을 지정할 수 없습니다.

즉, 코드 수정이 거의 또는 전혀 필요하지 않은 요소를 기본 툴팁 대신 마우스로 가리킬 때 스타일을 표시하는 일부 라이브러리를 사용할 수 있습니다 ...

기본 브라우저 툴팁의 스타일을 지정할 수 없습니다. 그러나 자바 스크립트를 사용하여 나만의 맞춤 HTML 툴팁을 만들 수 있습니다.

a[title="My site"] {
    color: red;
}

예를 들어 추가하려는 모든 속성에서도 작동합니다.

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

http://jsfiddle.net/vpYWE/1/ 에서 작동하는지 확인하십시오.