Question

我想在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上工作。

Answer 1

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

Answer 2

你可以试试这个： <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>

Source

jsFiddle

Answer 3

  .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;
        }

Working DEMO

Answer 4

您在一些评论中列出的小提琴基本上可以在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本身添加额外的元素。除了你要添加的样式和样式之外，你实际上还会看到标题工具提示。

IE8上的自定义工具提示标题

4 个答案: