CSS表格圆 Angular 及图片修改

Question

我找到了一个很酷的 css“tooltip”脚本，它非常适合我的网站，但当有人将鼠标悬停在 href 上时，它就可以工作了。

我的 CSS 技能非常有限，尤其是在定位方面。因此，这可能对我有所帮助，具体取决于我如何解释我需要做什么。

下面是 and 标签，当您悬停鼠标时，它当前有效。

<style type="text/css">
    .tooltip {
        border-bottom: 1px dotted #000000; color: #000000; outline: none;
        cursor: help; text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .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;
    }
    .tooltip:hover img {
        border: 0; margin: -10px 0 0 -55px;
        float: left; position: absolute;
    }
    .tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
    }
    .custom { padding: 0.5em 0.8em 0.8em 2em; }
    * html a:hover { background: transparent; }
    .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>


<table style="width:100%;">
  <tr>
    <td>
      <a class="tooltip" href="#">Warning<span class="custom warning">
      <img src="/images/tooltip/warning.png" alt="Warning" height="48" width="48" />
      <em>Warning</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</span>
     </a>
    </td>
  </tr>
</table>

你会看到我也有一张图片。这是一个简单的黄色感叹号危险标志。但它很好地位于工具提示框的左侧。

我现在正在尝试使用相同的工具提示(圆边和所有)，但没有悬停。换句话说，我非常喜欢它，我想把它放在我的网页上，也许在标题中，在右侧，并将它作为一个静态的东西。

玩过样式后，我基本上得出结论，我需要定位方面的帮助。

你会看到 .tooltip span { margin-left: -999em;position:absolute； }这一直是我的主要问题。我想如果我去掉 margin-left 它只会显示工具提示，而不需要 :hover 来显示。 las，它让我望而却步!

我怎样才能简单地“删除” ，并按原样显示工具提示，而不需要悬停？

Answer 1

编辑我觉得自己很好，但我很无聊。所以这里又是固定的右上角定位。我还更改了类名(工具提示似乎可能会用于其他用途)

Fixed Positioning

好的，所以我已经去掉了你不需要的所有东西(一眼看去)

See Here

HTML

<div class="tooltip" href="#"><span class="custom warning">
    <img src="/images/tooltip/warning.png" alt="Warning" height="48" width="48" />
    <em>Warning</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</span>
</div>

CSS

.tooltip {
    cursor: help;
    position: relative;
}
.tooltip 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;
}
.tooltip img {
    border: 0; margin: -10px 0 0 -55px;
    float: left; position: absolute;
}
.tooltip em {
    font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
    display: block; padding: 0.2em 0 0.6em 0;
}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }