爲工具提示定製css後，它顯示兩次

爲工具提示msg定製CSS後，它在屏幕上顯示兩次。以下是所提供的實施方式。爲工具提示定製css後，它顯示兩次

<a href="#" title="This is some information for our tooltip." class="tooltip"> 
    <span title="More">CSS3 Tooltip</span> 
</a>

.tooltip { 
    display: inline; 
    position: relative; 
} 

.tooltip:hover:after { 
    background: #333; 
    background: rgba(0,0,0,.8); 
    border-radius: 5px; 
    top: 26px; 
    color: #fff; 
    content: attr(title); 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 220px; 
} 

.tooltip:hover:before { 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 0 6px 6px 6px; 
    top: 20px; 
    content: ""; 
    left: 50%; 
    position: absolute; 
    z-index: 99; 
}

樣本輸出：

幫我找到這個原因，我們如何能抑制第二提示味精

的jsfiddle（sample view）

來源

2016-02-03 Chandan Prakash Sharma

只是刪除了'內跨度title'屬性。 – RRK

我刪除，但仍然相同，看到更新的JSFiddle鏈接，我在問題 –

更新在CSS和HTML都'數據標題'而不是'title' – Dhara

您只使用CSS「擴展」功能ty爲標題，但原始標題屬性仍然呈現。

您可能想要將其更改爲默認情況下未由瀏覽器呈現的data-title，並將CSS更改爲content: attr(data-title)以代替它。

此外，刪除內部跨度的標題，它是多餘的和不必要的。

Example

來源

2016-02-03 08:00:24 casraf

對不起，但我無法用數據標題替換標題，因爲此標題屬性在動態樹中動態生成 –

感謝@casraf分享您的想法。我用你的方法，並動態地用數據標題替換標題。我分享了我的解決方案，這可能有助於某人 –

使用data-title屬性，而不是title。

<a href="#" data-title="This is some information for our tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span></a>

然後，在你的css中提取這個屬性的內容。

content: attr(data-title);

編輯：

如果你有在title屬性無法控制，你可以在運行時使用JavaScript刪除它們。

var tooltipElements = Array.prototype.slice.call(document.querySelectorAll('.tooltip')); 

tooltipElements.forEach(replaceTitleWithDataTitle); 

function replaceTitleWithDataTitle(element) { 
    var title = element.getAttribute('title'); 

    element.removeAttribute('title'); 
    element.setAttribute('data-title', title || ''); 
}

來源

2016-02-03 08:00:27 Prashant

對不起，但我無法用數據標題替換標題，因爲此標題屬性在動態樹中動態生成 –

如果你想保持原來的名稱（不切換到數據永久所有權），你可以使用JavaScript來刪除和重新懸停的屬性。見：jquery: hide title attribute but not remove it

或者更容易使用：ARIA標籤

<a href="#" aria-label="This is some information for our tooltip." class="tooltip"> 
    <span>CSS3 Tooltip</span> 
</a>

來源

2016-02-03 08:24:10

這裏是解決方案，所以我分享在這裏，它可能會幫助別人：我應用了哪些建議在大多數同樣的方法答案即

，你可能想將其更改爲未通過瀏覽器的默認渲染數據稱號，並改變CSS內容：ATTR（數據名稱）以使用該插件TEAD。

附加上面我做了下面的變化。

後頁面加載動態做以下

附加data-title屬性通過複製title屬性的內容
然後取出title屬性

下面的示例代碼

$(document).ready(function(){ 
    $(".tooltip").hover(function(){ 
    $(this).attr("data-title", $(this).attr("title")); 
    $(this).removeAttr("title"); 
    }, function(){ 
    $(this).attr("title", $(this).attr("data-title")); 
    $(this).removeAttr("data-title"); 
    }); 
});

JsFiddle link

來源

2016-02-03 08:51:27

爲工具提示定製css後，它顯示兩次

回答

相關問題