我的工具提示可以適用於觸摸屏嗎？

我已經爲我的廣告製作了一些工具提示，這些提示使用了很多專業術語 - 它們以簡單的鼠標顯示。顯然，他們不能在觸摸界面上工作。我的工具提示可以適用於觸摸屏嗎？

我僅限於理想純HTML5和CSS3，絕對不是jQuery，理想情況下不是JavaScript。我試過改變（或者說加入）：active：hover類，但在觸摸屏上根本沒有任何反應。

當前HTML和CSS是

.tiptext { 
 
    cursor: help; 
 
    color: black; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 600 !important; 
 
    border-bottom: 1px solid #ebebeb; 
 
    box-shadow: inset 0 -5px 0 #ebebeb; 
 
    -webkit-transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    line-height: 172%; 
 
    -webkit-animation-name: link-helpoff; 
 
    -webkit-animation-duration: 1s; 
 
    animation-name: link-helpoff; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0.4s; 
 
} 
 
.tiptext::after { 
 
    content: ""; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    pointer-events: none; 
 
    color: transparent; 
 
    background-color: transparent; 
 
    transition: background-color 0.5s linear; 
 
} 
 
.tiptext:hover::after { 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 
.description { 
 
    border: 1px solid #e3e3e3; 
 
    background: white; 
 
    width: auto; 
 
    max-width: 275px; 
 
    height: auto; 
 
    padding: 10px; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 300; 
 
    color: rgb(39, 44, 45); 
 
    font-size: 13px; 
 
    z-index: 500; 
 
    position: absolute; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
    cursor: default; 
 
    display: inline-block; 
 
} 
 
.tiptext > .description { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s linear 0.4s, opacity 0.4s linear; 
 
} 
 
.tiptext:hover > .description { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition-delay: 0s; 
 
    -webkit-transition: opacity 0.2s ease-in; 
 
    -moz-transition: opacity 0.2s ease-in; 
 
    -ms-transition: opacity 0.2s ease-in; 
 
    -o-transition: opacity 0.2s ease-in; 
 
    transition: opacity 0.2s ease-in; 
 
} 
 
.tiptext:hover { 
 
    color: black; 
 
    -webkit-animation-name: link-help; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: link-help; 
 
    animation-duration: 0.6s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0s; 
 
}

<span class="tiptext"> 
 
    <span class="description" style="text-align:center;">You can read more about the topic in this pop up box</span> 
 
    Mouse over me to learn more. 
 
</span>

有一些動畫和弄虛作假的CSS事情（和我沒有將鏈接幫助的動畫，但你的想法）基本上，當你將鼠標放在它上面時，這個盒子會淡入淡出 - 還有一個全屏幕的白色背景，它會淡入一點點不透明的狀態，以便將蒙上眼睛的盒子放到焦點上 - 如果觸摸時不發生這種情況，屏幕設備。

我懷疑可能需要進行實質性更改才能在觸摸屏設備上按下相同的彈出框。

來源

2016-05-10 Danny Shepherd

我不會介意，但沒有怎麼辦？（改變：激活，：焦點，變化幅度以DIV），甚至可以讓工具提示出現在我的任何iOS設備，點擊它什麼都不做。 –

是的，有一種方法。

首先：將屬性「ontouchstart」添加到您的按鈕。其次：爲以下項添加樣式：活動，：焦點和：懸停。

我已經在iOS上測試過它，它工作。（沒有嘗試過與Android）。

div { 
 
    display: none; 
 
} 
 
button { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    
 
} 
 
button:active, 
 
button:focus, 
 
button: hover { 
 
    background-color: blue; 
 
} 
 
button:active + div, 
 
button:focus + div, 
 
button:hover + div { 
 
    display: block; 
 
}

<p>Hello</p> 
 
<button ontouchstart>Activate</button> 
 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, ipsa, officiis! Est voluptatibus explicabo sed atque provident vel deleniti nulla quis, ipsa quas dolorum, dolorem cum possimus accusamus impedit nostrum!</div> 
 
<p>Goodbye</p>

這樣做是將 tabindex屬性添加到您的 .tiptext元素，給它的 -1值

來源

2016-05-10 23:18:34 haltersweb

也適用於Android！ – JakobMillah

嗨@haltersweb只是試圖把它翻譯成我的代碼 - 因爲我沒有一個按鈕，而且有一個浮動的工具提示，而不是 - 在我的記錄是「按鈕」將成爲我的工具提示標題？我可以添加'ontouchstart'到一個跨度嗎？ –

好吧，我已經重寫了我的原始代碼來實現這一點，除了移動設備上的工具提示的樣式，我正在努力（見[鏈接]（http://stackoverflow.com/questions/37159636/）製作工具提示 - 浮動和填充 - 移動屏幕上半部分）它的工作原理我唯一的問題是，現在在桌面上，您可以在工具提示框中突出顯示桌面或將鼠標懸停在桌面上因爲只要你將鼠標移開，它就會消失，然後將鼠標懸停在該鏈接上，然後將鼠標懸停在該框上以保持其活動狀態。必須進行調整才能啓用該功能。 –

的一種方式。這將允許元素獲得焦點，因此可以通過:focus僞類進行選擇。

你還需要到touchstart事件，以獲得iOS的識別:active和:focus僞類添加到您的body標籤（或您正在使用的元素的任何父元素）。

<body ontouchstart>

.tiptext { 
 
    cursor: help; 
 
    color: black; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 600 !important; 
 
    border-bottom: 1px solid #ebebeb; 
 
    box-shadow: inset 0 -5px 0 #ebebeb; 
 
    -webkit-transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    transition: background .15s cubic-bezier(.33, .66, .66, 1); 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    line-height: 172%; 
 
    -webkit-animation-name: link-helpoff; 
 
    -webkit-animation-duration: 1s; 
 
    animation-name: link-helpoff; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0.4s; 
 
} 
 
.tiptext::after { 
 
    content: ""; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    pointer-events: none; 
 
    color: transparent; 
 
    background-color: transparent; 
 
    transition: background-color 0.5s linear; 
 
} 
 
.tiptext:focus::after,.tiptext:hover::after { 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 
.description { 
 
    border: 1px solid #e3e3e3; 
 
    background: white; 
 
    width: auto; 
 
    max-width: 275px; 
 
    height: auto; 
 
    padding: 10px; 
 
    font-family: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
 
    font-weight: 300; 
 
    color: rgb(39, 44, 45); 
 
    font-size: 13px; 
 
    z-index: 500; 
 
    position: absolute; 
 
    margin-left: 50px; 
 
    margin-top: 20px; 
 
    cursor: default; 
 
    display: inline-block; 
 
} 
 
.tiptext > .description { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s linear 0.4s, opacity 0.4s linear; 
 
} 
 
.tiptext:focus > .description,.tiptext:hover > .description { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition-delay: 0s; 
 
    -webkit-transition: opacity 0.2s ease-in; 
 
    -moz-transition: opacity 0.2s ease-in; 
 
    -ms-transition: opacity 0.2s ease-in; 
 
    -o-transition: opacity 0.2s ease-in; 
 
    transition: opacity 0.2s ease-in; 
 
} 
 
.tiptext:focus,.tiptext:hover { 
 
    color: black; 
 
    -webkit-animation-name: link-help; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: link-help; 
 
    animation-duration: 0.6s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    transition-delay: 0s; 
 
}

<span class="tiptext" tabindex="-1"> 
 
    <span class="description" style="text-align:center;">You can read more about the topic in this pop up box</span> 
 
    Mouse over me to learn more. 
 
</span>

來源

2016-05-11 08:53:55 Shaggy

我認爲這可能已經破解了它，但在iOS上，當你按下它時，跨度仍然沒有任何作用。我認爲我的原始代碼和佈局需要四處移動，否則它可能必須有一個空白的'href'才能在移動設備上執行任何操作。 –

嘗試將'tabindex'設置爲'0'和/或使用'：active'僞類而不是'：focus'來查看它是否有效。但是，請注意，將tabindex設置爲0會強制您的'.tiptext'元素成爲用TAB鍵遍歷頁面時首先關注的元素。 – Shaggy

從@haltersweb中添加「ontouchstart」似乎已經完成了這一訣竅 - 現在只需將這些框設置爲移動設備即可。 –

我的工具提示可以適用於觸摸屏嗎？

回答

相關問題