工具提示爲移動瀏覽器

Question

如果我想提供更多的信息，目前我設置一些HTML的title屬性：在CSS

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

然後：

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

作品非常漂亮，視覺指示器移動將鼠標懸停在彈出式菜單上，然後彈出一些信息。但在移動瀏覽器上，我沒有得到那個工具提示。 title屬性似乎沒有效果。在移動瀏覽器中提供更多關於文本信息的正確方法是什麼？與上面相同，但使用Javascript來監聽點擊，然後顯示一個工具提示對話框？有沒有任何本地機制？

Answer 1

您可以使用Javascript來僞造標題工具提示行爲。當您在具有title屬性的元素上單擊/選項卡時，具有標題文本的子元素將被追加。再次點擊並將其刪除。

的JavaScript（用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; 
} 

演示：http://jsfiddle.net/xaAN3/

Answer 2

title屬性沒有在任何移動瀏覽器**在某種程度上支持了它會顯示與桌面鼠標用戶相同的工具提示** *（該屬性本身在標記中是支持的）*。
這隻適用於帶鼠標的桌面用戶，只有用戶才能使用鍵盤或屏幕閱讀器。

您可以使用JavaScript實現與您所說的幾乎類似的功能。

Answer 3

根據您要給用戶提供多少信息，模式對話框可能是一個優雅的解決方案。

具體來說，你可以試試qTip jQuery插件，它具有modal模式上$.click()觸發：

Answer 4

鑑於很多人現在（2015年）使用移動瀏覽器和標題仍然不是招在移動瀏覽器中找不到某種形式的曝光，或許是時候貶低對有意義信息的稱號了。

它不應該用於重要信息，但它現在變得對有用信息的懷疑，因爲如果該信息有用並且不能向半數用戶顯示，那麼向其他用戶顯示該信息的另一種方式需要被發現。

對於靜態頁面，可能在相關控件附近有一些可見的文本，即使是精細的打印。對於服務器生成的頁面，瀏覽器嗅探可能僅適用於移動瀏覽器。在客戶端，javascript可以用來通過冒泡來捕獲焦點事件，以顯示當前焦點元素旁邊的額外文本。這可以最大限度地減少佔用的屏幕空間，但不一定非常有用，因爲在很多情況下，只能通過立即激活其操作的方式將焦點集中到控件上，而無需查找關於它之前使用它！儘管如此，看起來在移動設備上顯示標題屬性的困難可能導致它的消亡，這主要是由於需要更通用的替代方案。這真是一個遺憾，因爲手機可以使用一種方式來按需顯示這些額外的信息，而不佔用有限的屏幕空間。

很久以前，w3c和手機瀏覽器廠商對這個問題沒有做任何事情似乎很奇怪。至少他們可以在長按控制器時出現的菜單頂部顯示標題文本。

Answer 5

flavaflo的回答稍微更精細的版本：

• 使用預先定義的DIV爲彈出，可容納HTML，而不是從一個title屬性讀取
• 打開上翻滾/關閉，如果鼠標已使用
• 點擊（觸摸屏）時打開，點擊打開的彈出窗口或文檔的任何其他位置關閉。

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

}); 

演示這裏https://jsfiddle.net/bgxC/yvs1awzk/

Answer 6

@cimmanon提到：span[title]:hover:after { content: attr(title) }爲您提供觸摸屏設備的基本工具提示。不幸的是，這有問題，觸摸屏設備上的默認UI行爲是當任何非鏈接/ uicontrol被按下時選擇文本。

爲了解決這個問題的選擇，你可以添加span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

完整的解決方案可以使用一些其他技術：

• 添加position: absolutebackground，border，box-shadow等，使它看起來像一個提示。
• 當用戶使用任何觸摸事件時，將類touched添加到body（通過js）。 然後，你可以做body.touched [title]:hover ...不影響臺式機用戶

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>