为工具提示定制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后，它显示两次

回答

相关问题