Показать abbr и акроним на мобильных устройствах

Question

Я часто использую тег abbr (и ранее аббревиатуры) на своем веб-сайте. Но я заметил, что этот тег не работает на мобильных/планшетных устройствах (сенсорные устройства). Поэтому мой вопрос: как я могу заставить его работать?

Я искал в Интернете для некоторых решений, но они не в полной мере полезны:

Решение 1:

abbr[title]:after 
{ 
    content: " (" attr(title) ")"; 
} 

@media screen and (min-width: 1025px) 
{ 
    abbr[title] 
    { 
     border-bottom: 1px dashed #ADADAD; 
     cursor:help; 
    } 

    abbr[title]:after 
    { 
     content: ""; 
    } 
} 

Решение 2:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { $('abbr').each(function() { $(this).click(function() { alert($(this).attr('title')); }); }); } 

Ни один из них не является полностью удовлетворение! Итак, некоторые альтернативы очень ценятся!

Answer 1

отсюда, в 2016 году, результаты поиска исключены. но я закончил с обходным путем: я решил использовать подсказки вместо предупреждений.

этот пример для jQuery & bootstrap tooltips.

так, в Solution 2, после того, как вы обнаружили мобильный телефон (сделать это, как вы хотите):

$('abbr').attr('data-toggle', 'tooltip'); // add atribute to all abbrs 
$('[data-toggle="tooltip"]').tooltip(); // initialize tooltips on all abbrs