243

ตัวอย่าง:

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

ฉันจะเปลี่ยนงานนำเสนอของคุณลักษณะ "ชื่อเรื่อง" ในเบราว์เซอร์ได้อย่างไร ตามค่าเริ่มต้นมันมีพื้นหลังสีเหลืองและตัวอักษรขนาดเล็ก ฉันต้องการทำให้มันใหญ่ขึ้นและเปลี่ยนสีพื้นหลัง

มีวิธี CSS ในการกำหนดลักษณะของชื่อเรื่องหรือไม่?

html css

— Kunpha
แหล่งที่มา

stackoverflow.com/questions/36275678/how-to-create-a-tooltip

— Pooja Kedar

133

นี่คือตัวอย่างของวิธีการ:

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>

ขยายตัวอย่างข้อมูล

— Valli
แหล่งที่มา

ทำงานไม่ถูกต้องใน FF หากแทนที่จะใช้แท็กให้ใช้แท็กเช่นtd

— dnim

6

ดูsixrevisions.com/css/css-only-tooltipsสำหรับตัวอย่างของเทคนิคข้างต้นพร้อมคำอธิบายโดยละเอียด

— จอร์จ

1

เมื่อฉันทำสิ่งนี้ฉันเห็นคำแนะนำเครื่องมือสองอัน หนึ่งในรูปแบบและหลังจากนั้นไม่นานหนึ่งที่ไม่มีสไตล์จะปรากฏขึ้นเหนืออันนี้ นี่คือซอของคุณ ฉันใช้โครเมียม นี่เป็นความผิดปกติหรือไม่?

8

คำตอบที่ไม่มีแอตทริบิวต์ title ในรหัสมีมากกว่า 100 upvotes ที่นี่ ... ?

— Ben Racicot

1

ไม่ได้ตอบคำถามจริง ... โห่!

— แมตต์

126

ดูเหมือนว่าในความเป็นจริงแล้วเป็นโซลูชัน CSS ที่บริสุทธิ์ซึ่งต้องการเพียงattrนิพจน์css เท่านั้นที่สร้างเนื้อหาและตัวเลือกแอททริบิวต์ (ซึ่งแนะนำว่ามันทำงานได้ไกลเท่า IE8):

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

ที่มา: https://jsfiddle.net/z42r2vv0/2/

อัปเดต w / อินพุตจาก @ViROscar: โปรดทราบว่าไม่จำเป็นต้องใช้แอตทริบิวต์เฉพาะแม้ว่าฉันใช้แอตทริบิวต์ "title" ในตัวอย่างด้านบน จริง ๆ แล้วข้อเสนอแนะของฉันจะใช้แอตทริบิวต์ "alt" เนื่องจากมีโอกาสที่ผู้ใช้จะไม่สามารถรับเนื้อหาจาก CSS ได้

อัปเดตอีกครั้งฉันไม่ได้เปลี่ยนรหัสเพราะแอตทริบิวต์ "ชื่อ" นั้นหมายถึงแอตทริบิวต์ "คำแนะนำเครื่องมือ" และอาจไม่ใช่ความคิดที่ดีที่จะซ่อนข้อความสำคัญภายในฟิลด์ที่เข้าถึงได้เฉพาะเมื่อวางเมาส์ไว้ แต่ถ้าคุณ สนใจที่จะทำให้ข้อความนี้เข้าถึงคุณลักษณะ "aria-label" ดูเหมือนว่าเป็นสถานที่ที่ดีที่สุด: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

— จอน z
แหล่งที่มา

11

และถ้าคุณไม่ต้องการสำหรับคำแนะนำเครื่องมือพื้นเมืองในที่สุดก็แสดงเช่นเดียวคุณก็สามารถใช้ "alt" แท็ก ..

— จอน Z

1

@Jonz ฉันได้ลองด้วยคุณสมบัติที่กำหนดเอง "data-alt = 'alt'" แล้วทุกอย่างก็โอเค ไม่จำเป็นต้องใช้คุณสมบัติ alt หรือหัวเรื่อง

— ViROscar

7

บริสุทธิ์ CSS คำแนะนำเครื่องมือมี wrawback ร้ายแรง - stacking contextพวกเขาจะกระโดดไปองค์ประกอบจึงกระโดดไปของมัน องค์ประกอบทั้งหมดที่มีpositionอื่น ๆ กว่าstaticจะสร้างใหม่บริบทซ้อนและคำแนะนำบริสุทธิ์ CSS ไม่ได้ออกไปข้างนอกมองเห็นไม่สามารถไปได้ไกลกว่าเช่นบริบทซ้อนดังนั้นหากคุณมีองค์ประกอบแน่นด้วยตำแหน่งrelative, คำแนะนำ CSS ของคุณจะไม่สามารถมองเห็นได้ ทางออกเดียวคือการแนบคำแนะนำเครื่องมือกับบริบทการซ้อนด้านบน(เช่น<body>) ซึ่งต้องการ JavaScript

— Vaclav Novotny

โชคไม่ดีที่มันหายไปเมื่อคลิก

— user2705463

71

คุณไม่สามารถจัดวางสไตล์ที่แท้จริงได้ `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 ด้านบนไม่ได้รับประกันว่าจะปรากฏบนหน้าเว็บ (เช่นอาจอยู่นอกพื้นที่มองเห็น) ในอีกทางหนึ่งก็รับประกันได้ว่าจะอยู่ในหน้าต่างปัจจุบันซึ่งไม่ได้เป็นกรณีสำหรับคำแนะนำเครื่องมือที่เกิดขึ้นจริง

นอกจากนี้หลอกหลอกเครื่องมืออยู่ในตำแหน่งที่สัมพันธ์กับองค์ประกอบที่มีหลอกหลอกเครื่องมือแทนที่จะสัมพันธ์กับที่เมาส์อยู่ในองค์ประกอบนั้น คุณอาจต้องการที่จะปรับแต่งที่ pseudo-tooltip แสดงขึ้น การมีมันปรากฏในสถานที่ที่รู้จักเมื่อเทียบกับองค์ประกอบสามารถเป็นประโยชน์หรือข้อเสียเปรียบขึ้นอยู่กับสถานการณ์

คุณไม่สามารถใช้`:before`หรือ`:after`องค์ประกอบที่ไม่ใช่ภาชนะ

มีคำอธิบายที่ดีในคำตอบนี้สำหรับ "ฉันสามารถใช้: ก่อนหรือ: หลังจากองค์ประกอบแบบหลอกในฟิลด์อินพุตได้หรือไม่"

ได้อย่างมีประสิทธิภาพที่นี้หมายถึงว่าคุณไม่สามารถใช้วิธีนี้ได้โดยตรงบนองค์ประกอบเช่น<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ในคำตอบนั้น (ถูกลบแล้ว)}

— Makyen
แหล่งที่มา

1

นี่อาจไม่ใช่คำตอบสำหรับคำถาม แต่นี่เป็นทางออกที่ดีที่สุด ขอบคุณ

— JJ Labajo

@JJLabajo ขอบคุณสำหรับความสมบูรณ์เกี่ยวกับเรื่องนี้เป็นทางออกที่ดีที่สุดจนถึง อย่างไรก็ตามฉันไม่แน่ใจว่าวิธีนี้จะไม่ตอบคำถาม คำถามกำลังถามหาสิ่งที่เป็นไปไม่ได้ คำตอบนี้บอกว่ามันเป็นไปไม่ได้ แต่เสนอทางเลือกที่ทำสิ่งที่คล้ายกับสิ่งที่ OP ต้องการ

— Makyen

ฉันคิดว่าวิธีนี้ใช้ไม่ได้กับองค์ประกอบเช่นinput[type='text']หรือtextareaแต่ฉันไม่รู้ว่าทำไม มีใครอธิบายได้บ้าง

— Cheeso

@Cheeso คุณถูกต้อง:beforeและ:afterองค์ประกอบหลอกไม่ทำงานกับองค์ประกอบที่ไม่ใช่ภาชนะ มีคำอธิบายที่ดีในคำตอบ: ฉันสามารถใช้: ก่อนหรือ: หลังจากองค์ประกอบแบบหลอกในฟิลด์อินพุตได้หรือไม่ ในการใช้วิธีการนี้อาจเป็นการง่ายที่สุดในการห่อองค์ประกอบที่ไม่ใช่คอนเทนเนอร์ใน<span>หรือ<div>ที่คุณใส่data-titleคุณสมบัติ คุณอาจจะยังต้องการที่จะให้พวกเขาdisplay: inline-block;เป็นที่จะทำให้พวกเขามีขนาดเดียวกันกับที่หรือ<input> <textarea>ฉันอัปเดตคำตอบนี้ด้วยตัวอย่าง

— Makyen

คำตอบนี้สอนให้เราทราบว่าเกิดอะไรขึ้นและให้ข้อมูลพื้นฐานที่มีโครงสร้างทุกชนิด

— Ideogram

26

CSS ไม่สามารถเปลี่ยนลักษณะที่ปรากฏของคำแนะนำเครื่องมือ มันขึ้นอยู่กับเบราว์เซอร์ / ระบบปฏิบัติการ หากคุณต้องการสิ่งที่แตกต่างคุณจะต้องใช้ Javascript เพื่อสร้างมาร์กอัปเมื่อคุณวางเมาส์ไว้เหนือองค์ประกอบแทนที่จะเป็นคำแนะนำเครื่องมือเริ่มต้น

— cletus
แหล่งที่มา

22

หนึ่งไม่จำเป็นต้องใช้ JS เพื่อทำมัน

— Aneves

9

ความเสี่ยงในการตอบ 'คุณไม่สามารถ' คือพวกเขาสามารถล้าสมัย (ความเสี่ยงอีกอย่างคือคุณไม่สามารถรู้ได้เลย)

— Michael Scheper

12

ฉันคิดว่าฉันจะโพสต์โซลูชัน JavaScript ของฉัน 20 บรรทัดที่นี่ มันไม่สมบูรณ์แบบ แต่อาจมีประโยชน์สำหรับบางคนขึ้นอยู่กับสิ่งที่คุณต้องการจากเคล็ดลับเครื่องมือของคุณ

ควรใช้เมื่อไร

จัดรูปแบบคำแนะนำเครื่องมือโดยอัตโนมัติสำหรับองค์ประกอบ HTML ทั้งหมดที่มีTITLEแอตทริบิวต์ที่กำหนดไว้ (ซึ่งรวมถึงองค์ประกอบที่เพิ่มเข้ากับเอกสารแบบไดนามิกในอนาคต)
ไม่มีการเปลี่ยนแปลง Javascript / HTML หรือแฮ็กที่จำเป็นสำหรับคำแนะนำเครื่องมือทุกอัน (เฉพาะTITLEแอตทริบิวต์ชัดเจนเชิงความหมาย)
เบามาก (เพิ่มประมาณ 300 ไบต์ gzipped และย่อขนาด)
คุณต้องการเพียงคำแนะนำเครื่องมือที่มีสไตล์ขั้นพื้นฐานเท่านั้น

เมื่อไม่ใช้

ต้องใช้ 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;
}

— ChrisF
แหล่งที่มา

2

ใช้งานได้ดี! แก้ไขข้อผิดพลาดเล็กน้อย (หากชื่อว่าง) สามารถดูได้ที่นี่: stackoverflow.com/questions/26702472/…

— Malasorte

หากคุณเคลื่อนที่อย่างรวดเร็วบนองค์ประกอบที่ฉันได้รับเคล็ดลับเครื่องมือที่ว่างเปล่าแม้จะมีการแก้ไขข้อผิดพลาดดังกล่าวข้างต้น นี่คือผิดปกติและหยุดถ้าฉันถอด $ (นี่) .removeAttr ("title") แต่แน่นอนฉันก็ได้รับความช่วยเหลือตามมาตรฐานที่แสดงหลังจากผ่านไประยะหนึ่ง

— อัลเลนพิชิต

10

ฉันได้พบคำตอบที่นี่: 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>

ขยายตัวอย่างข้อมูล

— AndrésChandía
แหล่งที่มา

7

jsfiddle สำหรับรูปแบบคำแนะนำเครื่องมือที่กำหนดเองอยู่ที่นี่

มันขึ้นอยู่กับการจัดตำแหน่ง CSS และตัวเลือกคลาส pseduo

ตรวจสอบเอกสาร MDNสำหรับการสนับสนุน cross-browser ของคลาส pseudo

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

— prasun
แหล่งที่มา

5

คำแนะนำดั้งเดิมไม่สามารถจัดรูปแบบได้

ที่ถูกกล่าวว่าคุณสามารถใช้ห้องสมุดบางอย่างที่จะแสดงสไตล์ชั้นลอยเมื่อองค์ประกอบจะถูกโฉบ (แทนคำแนะนำเครื่องมือพื้นเมืองและปราบปรามพวกเขา) ต้องการการแก้ไขรหัสน้อยหรือไม่มีเลย ...

— Poncha
แหล่งที่มา

ฉันไม่คิดว่าคุณสามารถระงับคำแนะนำเครื่องมือพื้นฐานได้หากองค์ประกอบมีtitleแอตทริบิวต์ ดังนั้นถ้าคุณตั้งค่าการใช้งานคำแนะนำเครื่องมือของคุณเองจะดีกว่าที่จะใช้บางส่วนแอตทริบิวต์อื่น ๆ (พูดdata-tip) titleแทน

— Jukka K. Korpela

1

คุณสามารถถ้าหลังจากที่คุณแนบกับเหตุการณ์คุณล้างแอตทริบิวต์ชื่อ

— poncha

1

ฉันเห็นประเด็นของคุณ แต่มันไม่ได้เกี่ยวกับการจัดแต่งเครื่องมือคำแนะนำแบบดั้งเดิม มันเกี่ยวกับการหลีกเลี่ยงพวกมัน (โดยการดัดแปลง DOM)

— Jukka K. Korpela

@ JukkaK.Korpela yep และฉันพูดในประโยคแรกของฉันว่ามันเป็นไปไม่ได้;)

— poncha

ประโยชน์ของการใช้แอททริบิวต์หัวเรื่องและการล้างในภายหลังคือคำแนะนำเครื่องมือยังคงใช้ได้หากผู้ใช้ปิดการใช้งาน JavaScript

— JJJ

2

คุณไม่สามารถจัดรูปแบบเคล็ดลับเครื่องมือของเบราว์เซอร์เริ่มต้น แต่คุณสามารถใช้จาวาสคริปต์เพื่อสร้างเคล็ดลับเครื่องมือ HTML ที่กำหนดเองของคุณเอง

— bfavaretto
แหล่งที่มา

-1

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/

— shana
แหล่งที่มา

14

จัดรูปแบบองค์ประกอบที่มีหัวเรื่องที่ระบุ ไม่ใช่ชื่อคำแนะนำเครื่องมือที่เบราว์เซอร์แสดง

— Rowland Shaw

1

นอกจากนี้anythingแอตทริบิวต์ HTML ไม่ถูกต้อง สำหรับแอตทริบิวต์ที่กำหนดเองให้ใช้data-แอตทริบิวต์

— user4642212

วิธีเปลี่ยนสไตล์ของแอททริบิวต์ title ภายในแท็ก anchor?

คุณไม่สามารถจัดวางสไตล์ที่แท้จริงได้ titleแอตทริบิวต์ที่

คุณสามารถสร้างหลอกเครื่องมือกับ CSS และแอตทริบิวต์ที่กำหนดเอง (เช่นdata-title)

ตัวอย่างคำแนะนำเครื่องมือสไตล์

ปัญหาที่ทราบ

คุณไม่สามารถใช้:beforeหรือ:afterองค์ประกอบที่ไม่ใช่ภาชนะ

คุณไม่สามารถจัดวางสไตล์ที่แท้จริงได้ `title`แอตทริบิวต์ที่

คุณสามารถสร้างหลอกเครื่องมือกับ CSS และแอตทริบิวต์ที่กำหนดเอง (เช่น`data-title`)

คุณไม่สามารถใช้`:before`หรือ`:after`องค์ประกอบที่ไม่ใช่ภาชนะ