從標題=「工具提示文本」設計原生工具提示

我有具有標題屬性的輸入元素，這當然會帶有帶有屬性值消息的工具提示。從標題=「工具提示文本」設計原生工具提示

出於某種原因，此工具提示需要使用CSS樣式。

怎麼辦？我不知道它將在哪個容器中渲染，我對此一無所知。此外，它不能被螢火蟲的開發人員工具訪問

2012-03-29 eomeroff

的http：//計算器。com/questions/36275678/how-to-create-a-tooltip – 2017-03-16 05:28:14

看來，事實上有一個純粹的CSS解決方案，只需要css attr表達式，生成的內容和屬性選擇器（這表明它的工作原理與IE8相差甚遠）：

a[title]:hover:after { 
    content: attr(title); 
    position: absolute; 
}

來源：http://jsfiddle.net/tDQWN/

更新瓦特從@ViROscar /輸入：請注意，這是沒有必要使用任何特定的屬性，雖然我使用了「title」屬性在上面的例子;實際上我的建議是使用「alt」屬性，因爲有些內容可能無法從CSS中受益的用戶訪問。

再次更新我不會改變的代碼，因爲「標題」屬性已經基本走到意味着「工具提示」屬性，它可能不是躲領域內重要的文字只在懸停訪問一個好主意，但如果你有興趣做這個文本訪問的「詠歎調-label」屬性似乎是它最好的地方：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

來源

2013-07-10 19:44:42

如果你不希望原生工具提示最終顯示，你可以隨時使用「alt」標籤。 – 2013-07-10 21:32:58

愛技術！我在圖片上試了一下，你知道它爲什麼可能不起作用嗎？ http://jsfiddle.net/tDQWN/4058/ – Chris 2014-03-10 15:54:06

@ChrisNicholson是的，它不會以這種方式工作，因爲圖像是「無效」標籤，它們不能包含僞元素。 – 2014-10-22 18:46:26

本機工具提示無法設置樣式。

話雖這麼說，你可以使用一些庫，將顯示樣式浮動層時，元件正處於徘徊（而不是本機工具提示和鎮壓他們）需要很少或不需要修改代碼...

來源

2012-03-29 14:42:13 poncha

如果一個元素具有'title'屬性，我認爲你不能壓制本地工具提示。因此，如果你設置了自己的工具提示實現，最好使用其他屬性（比如'data-tip'）而不是'title'。 – 2012-03-29 16:08:11

你可以，如果你附加到事件後，你清除標題屬性 – poncha 2012-03-30 08:49:03

我明白你的觀點，但它不是造型原生工具提示;它是關於避免它們（通過修改DOM）。 – 2012-03-30 10:26:17

你不能設置默認瀏覽器工具提示。但是，您可以使用JavaScript來創建自己的自定義HTML工具提示。

來源

2012-03-29 14:42:49 bfavaretto

一種定製的工具提示模式的jsfiddle是Here

它是基於CSS的定位和pseduo類選擇

檢查MDN docs爲跨瀏覽器支持僞類的

<!-- HTML --> 
<p> 
    <a href="http://www.google.com/" class="tooltip"> 
    I am a 
     <span> (This website rocks) </span></a>&nbsp; a developer. 
</p> 

    /*CSS*/ 
a.tooltip { 
    position: relative; 
} 

a.tooltip span { 
    display: none;  
} 

a.tooltip:hover span, a.tooltip:focus span { 
    display:block; 
    position:absolute; 
    top:1em; 
    left:1.5em; 
    padding: 0.2em 0.6em; 
    border:1px solid #996633; 
    background-color:#FFFF66; 
    color:#000; 
}

來源

2013-06-13 05:22:58 prasun

這應該是upvote :) – 2016-09-19 15:08:36

我已經在這裏找到了答案：http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

我自己的代碼是這樣的，如果您保留屬性的標題名稱，則最終有兩個t彈出窗口，所以我更改了屬性名稱他同樣的文字，另一個變化就是我懸停的文字顯示在暴露的文字下方。

CSS

.tags { 
    display: inline; 
    position: relative; 
} 
.tags:hover:after { 
    background: #333; 
    background: rgba(0,0,0,.8); 
    border-radius: 5px; 
    bottom: -34px; 
    color: #fff; 
    content: attr(glose); 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 350px; 
} 
.tags:hover:before { 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 0 6px 6px 6px; 
    bottom: -4px; 
    content: ""; 
    left: 50%; 
    position: absolute; 
    z-index: 99; 
}

HTML

<a class="tags" glose="Text shown on hovering">Exposed text</a>

來源

2016-01-28 19:02:57

從標題=「工具提示文本」設計原生工具提示

回答

相關問題