Tooltips cho trình duyệt di động

Question

Tôi hiện thiết lập các title thuộc tính của một số HTML nếu tôi muốn cung cấp thêm thông tin:

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p> 

Sau đó, trong CSS:

.more_info { 
    border-bottom: 1px dotted; 
} 

trình rất tốt đẹp, chỉ báo trực quan để di chuyển chuột qua và sau đó một cửa sổ bật lên nhỏ với nhiều thông tin hơn. Nhưng trên trình duyệt di động, tôi không nhận được chú giải công cụ đó. title thuộc tính dường như không có hiệu lực. Cách thích hợp để cung cấp thêm thông tin về một đoạn văn bản trong trình duyệt di động là gì? Tương tự như trên nhưng sử dụng Javascript để nghe nhấp chuột và sau đó hiển thị hộp thoại chú giải công cụ? Có cơ chế tự nhiên nào không?

Answer 1

Bạn có thể giả mạo hành vi chú giải công cụ tiêu đề bằng Javascript. Khi bạn nhấp/tab trên một phần tử có thuộc tính title, phần tử con có văn bản tiêu đề sẽ được thêm vào. Nhấp một lần nữa và nó sẽ bị xóa.

Javascript (thực hiện với jQuery):

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

CSS:

.more_info { 
    border-bottom: 1px dotted; 
    position: relative; 
} 

.more_info .title { 
    position: absolute; 
    top: 20px; 
    background: silver; 
    padding: 4px; 
    left: 0; 
    white-space: nowrap; 
} 

Demo: http://jsfiddle.net/xaAN3/

Answer 2

Thuộc tính tiêu đề không được hỗ trợ trong bất kỳ trình duyệt di động ** trong một cách mà nó sẽ hiển thị chú giải công cụ tương tự như người dùng chuột trên máy tính để bàn ** * (bản thân thuộc tính là ofcourse được hỗ trợ trong đánh dấu) *.
Chỉ về cơ bản đối với người dùng máy tính để bàn có chuột, người dùng chỉ sử dụng bàn phím không thể sử dụng nó hoặc trình đọc màn hình.

Bạn có thể đạt được gần như tương tự với javascript như bạn đã nói.

Answer 3

Tùy thuộc vào lượng thông tin bạn muốn cung cấp cho người dùng, hộp thoại phương thức phương thức có thể là giải pháp thanh lịch.

Cụ thể, bạn có thể thử các jQuery plugin qTip, trong đó có một chế độ modal bắn vào $.click():

Answer 4

Cho rằng có rất nhiều người ngày nay (2015) sử dụng các trình duyệt di động, và danh hiệu vẫn hasn Không tìm thấy một hình thức tiếp xúc trong các trình duyệt trên điện thoại di động, có lẽ đã đến lúc phải từ bỏ sự phụ thuộc vào tiêu đề cho các thông tin có ý nghĩa.

Nó không bao giờ được sử dụng cho thông tin quan trọng, nhưng bây giờ trở nên đáng ngờ vì thông tin hữu ích và không thể hiển thị cho một nửa người dùng, sau đó một cách khác để hiển thị nó cho hầu như tất cả người dùng cần được tìm thấy.

Đối với các trang tĩnh, có lẽ một số văn bản hiển thị gần với điều khiển có liên quan, ngay cả khi in đẹp. Đối với các trang do máy chủ tạo, trình duyệt đánh hơi có thể chỉ cung cấp cho các trình duyệt trên thiết bị di động. Về phía máy khách, javascript có thể được sử dụng để bẫy sự kiện lấy nét, thông qua sủi bọt, để hiển thị văn bản bổ sung bên cạnh phần tử hiện đang tập trung. Điều đó sẽ giảm thiểu không gian màn hình được lấy lên, nhưng không nhất thiết phải sử dụng nhiều, vì trong nhiều trường hợp, việc tập trung vào điều khiển chỉ có thể được thực hiện theo cách kích hoạt ngay lập tức hành động của nó, bỏ qua khả năng tìm ra về nó trước khi sử dụng nó!Tuy nhiên, trên tất cả, có vẻ như những khó khăn khi hiển thị thuộc tính tiêu đề trên thiết bị di động có thể dẫn đến sự sụp đổ của nó, chủ yếu là do cần một giải pháp thay thế phổ quát hơn. Tuy nhiên, điều này có thể xảy ra. Đó là một điều đáng tiếc, bởi vì điện thoại di động có thể sử dụng một cách để hiển thị thêm thông tin theo yêu cầu, mà không chiếm không gian màn hình hạn chế.

Có vẻ lạ khi các nhà sản xuất trình duyệt di động và w3c không làm gì về vấn đề này từ lâu. Ít nhất họ có thể đã hiển thị văn bản tiêu đề ở trên cùng của menu xuất hiện khi nhấn và giữ nút điều khiển.

Answer 5

phiên bản Hơi xây dựng hơn về câu trả lời flavaflo của:

• Sử dụng div được xác định trước như pop-up có thể chứa HTML, chứ không phải là đọc từ một thuộc tính tiêu đề
• Mở/đóng trên rollover nếu chuột đã sử dụng
• Mở trên nhấp chuột (màn hình cảm ứng) và đóng khi nhấp vào cửa sổ bật lên mở hoặc bất kỳ nơi nào khác trên tài liệu.

HTML:

<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span> 

CSS:

.more_info { 
    border-bottom: 1px dotted #000; 
    position: relative; 
    cursor: pointer; 
} 

.more_info .popup { 
    position: absolute; 
    top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/ 
    background: #fff; 
    border: 1px solid #ccc; 
    padding: 8px; 
    left: 0; 
    max-width: 240px; 
    min-width: 180px; 
    z-index: 100; 
    display: none; 
} 

JavaScript/jQuery:

$(document).ready(function() { 

    //init pop-ups 
    $(".popup").attr("data-close", false); 

    //click on pop-up opener 
    //pop-up is expected to be a child of opener 
    $(".more_info").click(function() { 
     var $title = $(this).find(".popup"); 
     //open if not marked for closing 
     if ($title.attr("data-close") === "false") { 
      $title.show(); 
     } 
     //reset popup   
     $title.attr("data-close", false); 
    }); 

    //mark pop-up for closing if clicked on 
    //close is initiated by document.mouseup, 
    //marker will stop opener from re-opening it 
    $(".popup").click(function() { 
     $(this).attr("data-close",true); 
    }); 

    //hide all pop-ups 
    $(document).mouseup(function() { 
     $(".popup").hide(); 

    }); 

    //show on rollover if mouse is used 
    $(".more_info").mouseenter(function() { 
     var $title = $(this).find(".popup"); 
     $title.show(); 
    }); 

    //hide on roll-out 
    $(".more_info").mouseleave(function() { 
     var $title = $(this).find(".popup"); 
     $title.hide(); 
    }); 

}); 

Demo đây https://jsfiddle.net/bgxC/yvs1awzk/

Answer 6

Như @cimmanon đã đề cập: span[title]:hover:after { content: attr(title) } cung cấp cho bạn một tooltip thô sơ trên các thiết bị màn hình cảm ứng. Thật không may điều này có vấn đề mà hành vi ui mặc định trên các thiết bị màn hình cảm ứng là để chọn văn bản khi bất kỳ không liên kết/uicontrol được nhấn.

Để giải quyết vấn đề lựa chọn bạn có thể thêm span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

Một giải pháp toàn có thể sử dụng một số kỹ thuật khác:

• Thêm position: absolutebackground, border, box-shadow vv để làm cho nó trông giống như một tooltip.
• Thêm lớp touched vào phần thân (qua js) khi người dùng sử dụng bất kỳ sự kiện chạm nào. Sau đó, bạn có thể làm body.touched [title]:hover ... mà không ảnh hưởng người dùng máy tính để bàn

document.body.addEventListener('touchstart', function() { 
 
    document.body.classList.add('touched'); 
 
});

[title] { 
 
\t border-bottom: 1px dashed rgba(0, 0, 0, 0.2); 
 
\t border-radius:2px; 
 
\t position: relative; 
 
} 
 
body.touched [title] > * { 
 
\t user-select: none; 
 
} 
 
body.touched [title]:hover > * { 
 
\t user-select: auto 
 
} 
 
body.touched [title]:hover:after { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t right: -10%; 
 
\t content: attr(title); 
 
\t border: 1px solid rgba(0, 0, 0, 0.2); 
 
\t background-color: white; 
 
\t box-shadow: 1px 1px 3px; 
 
\t padding: 0.3em; 
 
\t z-index: 1; 
 
}

<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>