home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Tooltips สำหรับ Mobile Browsers ใน HTML/CSS/jQuery

Mobile ไม่มี Hover ต้องใช้ Click/Touch แสดง Tooltip

HTML

<p>ตัวอักษร <span class="demo" title="this is underscore">underlined</span> ครับ</p>

jQuery

$('span[title]').click(function() {
    var $title = $(this).find('.title');
    if (!$title.length) {
        $(this).append('' + $(this).attr('title') + '');
    } else {
        $title.remove();
    }
});

CSS

.demo { border-bottom: 2px dotted; position: relative; }
.demo .title {
    position: absolute; top: 15px; left: 0;
    background: gray; padding: 5px; white-space: nowrap;
}

Click ครั้งแรกแสดง Tooltip Click อีกครั้งซ่อน