Thí dụ:

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

Làm cách nào để thay đổi cách trình bày thuộc tính "title" trong trình duyệt?. Theo mặc định, nó chỉ có nền màu vàng và phông chữ nhỏ. Tôi muốn làm cho nó lớn hơn và thay đổi màu nền.

Có cách CSS nào để định kiểu thuộc tính title không?

Đây là một ví dụ về cách làm điều đó:

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>

Trên thực tế, có vẻ như có một giải pháp CSS thuần túy, chỉ yêu cầu attrbiểu thức css , các bộ chọn thuộc tính và nội dung được tạo ra (điều này cho thấy rằng nó hoạt động xa như IE8):

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

Nguồn: https://jsfiddle.net/z42r2vv0/2/

cập nhật w / input từ @ViROscar: xin lưu ý rằng không cần thiết phải sử dụng bất kỳ thuộc tính cụ thể nào, mặc dù tôi đã sử dụng thuộc tính "title" trong ví dụ trên; thực sự khuyến nghị của tôi sẽ là sử dụng thuộc tính "alt", vì có khả năng nội dung sẽ có thể truy cập được đối với người dùng không thể hưởng lợi từ CSS.

cập nhật lại Tôi không thay đổi mã vì thuộc tính "title" về cơ bản có nghĩa là thuộc tính "tooltip" và có lẽ không nên ẩn văn bản quan trọng bên trong một trường chỉ có thể truy cập trên di chuột, nhưng nếu bạn quan tâm đến việc làm cho văn bản này có thể truy cập được thuộc tính "aria-nhãn" có vẻ như là nơi tốt nhất cho nó: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribution

Bạn không thể tạo kiểu cho một titlethuộc tính thực tế

Cách văn bản trong titlethuộc tính được hiển thị được xác định bởi trình duyệt và thay đổi tùy theo trình duyệt. Trang web không thể áp dụng bất kỳ kiểu nào cho chú giải công cụ mà trình duyệt hiển thị dựa trên titlethuộc tính.

Tuy nhiên, bạn có thể tạo một cái gì đó rất giống nhau bằng cách sử dụng các thuộc tính khác.

Bạn có thể tạo một công cụ giả bằng CSS và thuộc tính tùy chỉnh (ví dụ data-title)

Đối với điều này, tôi sẽ sử dụng một data-titlethuộc tính. data-*các thuộc tính là một phương thức để lưu trữ dữ liệu tùy chỉnh trong các thành phần DOM / HTML. Có nhiều cách để truy cập chúng . Điều quan trọng, chúng có thể được chọn bằng CSS.

Cho rằng bạn có thể sử dụng CSS để chọn các thành phần có data-titlethuộc tính, sau đó bạn có thể sử dụng CSS để tạo :after(hoặc :before) contentcó chứa giá trị của thuộc tính bằng cách sử dụng attr().

Ví dụ về tooltip

Lớn hơn và với màu nền khác nhau (theo yêu cầu của câu hỏi):

[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

Kiểu dáng phức tạp hơn (chuyển thể từ bài đăng trên blog này ):

[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

Vấn đề đã biết

Không giống như một titlechú giải công cụ thực sự , chú giải công cụ được tạo bởi CSS ở trên không nhất thiết phải được đảm bảo hiển thị trên trang (tức là nó có thể nằm ngoài vùng nhìn thấy). Mặt khác, nó được đảm bảo nằm trong cửa sổ hiện tại, đây không phải là trường hợp của một tooltip thực tế.

Ngoài ra, pseudo-tooltip được định vị tương đối với phần tử có pseudo-tooltip chứ không liên quan đến vị trí của chuột trên phần tử đó. Bạn có thể muốn tinh chỉnh nơi hiển thị pseudo-tooltip. Có nó xuất hiện ở một vị trí đã biết liên quan đến yếu tố có thể là một lợi ích hoặc nhược điểm, tùy thuộc vào tình huống.

Bạn không thể sử dụng :beforehoặc :aftertrên các yếu tố không phải là container

Có một lời giải thích tốt trong câu trả lời này cho "Tôi có thể sử dụng: trước hoặc: sau phần tử giả trên trường đầu vào không?"

Một cách hiệu quả, phương tiện này mà bạn không thể sử dụng phương pháp này trực tiếp trên các yếu tố như <input type="text"/>, <textarea/>, <img>vv Các giải pháp dễ dàng là để bọc các yếu tố đó không phải là một thùng chứa trong một <span>hoặc <div>và có pseudo-tooltip trên thùng sơn.

Ví dụ về việc sử dụng một tooltip giả trên một <span>gói phần tử không chứa:

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

^{Từ mã trên bài đăng blog được liên kết ở trên (mà lần đầu tiên tôi thấy trong một câu trả lời ở đây đã đạo văn nó), tôi thấy rõ ràng là sử dụng một data-*thuộc tính thay vì titlethuộc tính. Làm như vậy cũng được đề xuất trong một bình luận bằng cách snostorm về câu trả lời (hiện đã bị xóa).}

CSS không thể thay đổi giao diện tooltip. Nó phụ thuộc vào trình duyệt / HĐH. Nếu bạn muốn một cái gì đó khác biệt, bạn sẽ phải sử dụng Javascript để tạo đánh dấu khi bạn di chuột qua phần tử thay vì chú giải công cụ mặc định.

Tôi nghĩ rằng tôi sẽ đăng giải pháp JavaScript 20 dòng của tôi ở đây. Nó không hoàn hảo, nhưng có thể hữu ích cho một số người tùy thuộc vào những gì bạn cần từ chú giải công cụ của bạn.

Khi nào sử dụng nó

• Tự động định kiểu cho chú giải công cụ cho tất cả các phần tử HTML với một TITLEthuộc tính được xác định (phần này bao gồm các phần tử được thêm động vào tài liệu trong tương lai)
• Không yêu cầu thay đổi hoặc hack Javascript / HTML cho mọi tooltip (chỉ TITLEthuộc tính, rõ ràng về mặt ngữ nghĩa)
• Rất nhẹ (thêm khoảng 300 byte được nén và rút gọn)
• Bạn chỉ muốn một tooltip có thể tạo kiểu rất cơ bản

Khi KHÔNG sử dụng

• Yêu cầu jQuery, vì vậy không sử dụng nếu bạn không sử dụng jQuery
• Hỗ trợ không tốt cho các phần tử lồng nhau mà cả hai đều có chú giải công cụ
• Bạn cần nhiều hơn một tooltip trên màn hình cùng một lúc
• Bạn cần tooltip biến mất sau một thời gian

Mật mã

// 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); }
}());

Dán nó ở bất cứ đâu, nó sẽ hoạt động ngay cả khi bạn chạy mã này trước khi DOM sẵn sàng (nó sẽ không hiển thị các chú giải công cụ của bạn cho đến khi DOM sẵn sàng).

Tùy chỉnh

Bạn có thể thay đổi varkhai báo trên dòng thứ hai để tùy chỉnh nó một chút.

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

Phong cách

Bây giờ bạn có thể định kiểu các chú giải công cụ của mình bằng CSS sau:

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

Tôi đã tìm thấy câu trả lời ở đây: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Mã riêng của tôi diễn ra như vậy, tôi đã thay đổi tên thuộc tính, nếu bạn duy trì tên tiêu đề cho thuộc tính bạn sẽ có hai cửa sổ bật lên cho cùng một văn bản, một thay đổi khác là văn bản của tôi khi di chuột hiển thị bên dưới văn bản được hiển thị.

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

Một jsfiddle cho mẫu tooltip tùy chỉnh ở đây

Nó dựa trên bộ định vị CSS và bộ chọn lớp pseduo

Kiểm tra tài liệu MDN để được hỗ trợ trình duyệt chéo của các lớp giả

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

Tooltip bản địa không thể được tạo kiểu.

Điều đó đang được nói, bạn có thể sử dụng một số thư viện sẽ hiển thị các lớp nổi khi các phần tử đang được di chuột (thay vì các chú giải công cụ gốc và loại bỏ chúng) yêu cầu ít hoặc không sửa đổi mã ...

Bạn không thể tạo kiểu cho tooltip trình duyệt mặc định. Nhưng bạn có thể sử dụng javascript để tạo các chú giải công cụ HTML tùy chỉnh của riêng bạn.

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

Điều này cũng hoạt động với bất kỳ thuộc tính nào bạn muốn thêm vào chẳng hạn:

HTML

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

CSS

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

Xem nó hoạt động tại: http://jsfiddle.net/vpYwe/1/