เพิ่มข้อความโฮเวอร์โดยไม่มีจาวาสคริปต์เหมือนกับที่เราวางไว้บนชื่อเสียงของผู้ใช้

262

ใน stackoverflow เมื่อเราวางตัวบนชื่อเสียงของผู้ใช้เราจะเห็นข้อความ ฉันเคยเห็นสิ่งนี้ในหลาย ๆ ที่และรหัสแหล่งที่มาบอกฉันว่ามันสามารถทำได้โดยไม่ต้อง js และฉันพยายามและได้รับสิ่งนี้เท่านั้น -

 <div="text">hover me</div>

html hover

— เถ้า
แหล่งที่มา

495

ใช้แอtitleททริบิวต์เช่น:

<div title="them's hoverin' words">hover me</div>

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

หรือ:

<span title="them's hoverin' words">hover me</span>

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

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

3

มันเหมือนกันเมื่อเราวางตัวบนชื่อเสียงของผู้ใช้

— Ash

1

reputation scoreใช่ถ้าคุณดูซอร์สโค้ดสำหรับชื่อเสียงของคุณจะเห็นว่าแอตทริบิวต์ชื่อที่ถูกกำหนดเป็น

— gcochard

6

@Kevin จริง ๆ แล้ววิธีนี้ดีกว่าโซลูชัน JavaScript เนื่องจากจะทำงานบนเบราว์เซอร์ที่ปิดใช้งาน JavaScript และยังเพิ่มคำแนะนำให้ผู้อ่านหน้าจอเกี่ยวกับเนื้อหาขององค์ประกอบ

— gcochard

1

@KevinMeredith ฉันจะบอกว่าการวัดโดยเฉพาะที่โซลูชัน JS จะดีกว่าคือคุณไม่สามารถจัดรูปแบบข้อความที่ปรากฏและเหลืออยู่กับการใช้งานดั้งเดิมเท่านั้น

— zero298

1

@David d C e Freitas: ขอบคุณสำหรับการเพิ่มความสว่าง StackOverflow ด้วยการแก้ไขคำตอบของคุณนี้ ... ไม่รู้วิธีติดแท็กคุณจริงๆ แต่แหมดี

— เมเรดิ ธ

16

แอตทริบิวต์ title ยังทำงานได้ดีกับองค์ประกอบ HTML อื่น ๆ เช่นลิงก์ ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>

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

15

บ่อยครั้งที่ฉันเข้าถึงแท็ก html ตัวย่อในสถานการณ์นี้

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

— Harry Bosh
แหล่งที่มา

7

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

— Lars Marius Garshol

8

คุณกำลังมองหาคำแนะนำเครื่องมือ

สำหรับคำแนะนำเครื่องมือพื้นฐานคุณต้องการ:

<div title="This is my tooltip">

สำหรับเวอร์ชัน javascript ที่ชื่นชอบคุณสามารถดู:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

ลิงค์ด้านบนให้คำแนะนำเครื่องมือ 12 ตัวเลือก

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