0

我想在 IE8 上设置浏览器给出的默认工具提示，最好只从 css 设置，所以我该怎么做。我已经阅读了很多关于的文章，直到现在我什么都没有。

所以我的 html 看起来像：

<a href="#" title="Show this title on IE8" class="title">hover me to see the tooltip</a>

小提琴：http: //jsfiddle.net/uGudk/36/

所以我如何设置这个工具提示的样式以便在 IE8 上工作。

4

4 回答 4

1

您无法设置 TITLE 工具提示的样式，它不是 HTML 元素。

于 2013-03-28T14:04:38.497 回答
1

你可以试试这个： <a class="tooltip" href="#">Click<span>This is a tooltip</span></a>

<style type="text/css">
.tooltip {
    border-bottom: 1px dotted #000000;
    color: #000000;
    outline: none;
    cursor: help; 
    text-decoration: none;
    position: relative;
}
.tooltip:hover span {
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    margin-left: 0;
    width: 250px;
    display: block;
}
span{
   display: none;    
}
</style>

资源

jsFiddle

于 2013-03-28T14:06:49.037 回答
1 
  .tooltip {
    border-bottom: 1px dotted #000000; color: #000000; outline: none;
    cursor: help; text-decoration: none;
    position: relative;
            }


.tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }

工作演示

于 2013-03-28T14:07:48.543 回答
1

您在一些评论中列出的小提琴基本上在 IE8 中有效。但是，您应用的大多数实际样式都是 IE8 无法识别的（box-shadow, linear-gradient, 并且border-radius在 IE8 中都不受支持）。如果您使用 IE8 可识别的样式（background-color例如，或使用实际图像作为background-image），那么它也将在 IE8 中设置样式。

这是一个带有 的示例background-color，因此您可以在 IE8 中看到它：http: //jsfiddle.net/elezar/w8bBk/

此外，从技术上讲，您在该示例中所做的并不是设置标题的样式。它基本上与@sureh 和@9edge 推荐的做法相同，但您是通过CSS 而不是在HTML 本身中添加额外的元素。除了您正在添加和设置样式的工具提示之外，您实际上仍会看到标题工具提示。

于 2014-01-30T18:36:51.080 回答