代码之家 › 专栏 › 技术社区 › Dreams

悬停在元素上的工具提示

angularjs css html

Dreams · 技术社区 · 8 年前

我在跟踪 this example <i>

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<td>
  <i class="material-icons tooltip" ng-click="view(application._id)" data-toggle="tooltip" title="Hooray!">
    receipt
  </i>
  <span class="tooltiptext">Tooltip text</span> &nbsp;&nbsp;
  <i class="material-icons" ng-click='edit(application._id)' style="color:red">
    edit
  </i> &nbsp;&nbsp;
  <i class="material-icons" ng-click="remove(application._id)" style="color:red">
    delete
  </i>
</td>

如何在这些图标上有悬停的工具提示 <i class="material-icons"> visibility: hidden; . 是因为这个吗?如何纠正?

编辑 -我已经添加了样式表,如果我包括它,图标是不可见的。

我创建了一个jsfiddle- https://jsfiddle.net/TTrain/r5hhkwLb/

4 回复 | 直到 7 年前

benok 8 年前

也许您可以在i标记或img之类的任何元素中使用Title=“Tooltip Text”。这更容易^_^

Community Mohan Dere 6 年前

嗨,伙计!我会尽量简单地回答你

工具提示效果不需要新类

HTML:

I'm using Font Awesome Framework, like as Your

<body>

    ... HTML CONTENT ...

    <i class="fa fa-facebook">
        <span>My beautiful tootip</span>
    </i>

    ... OTHER HTML CONTENT ...

</body>

CSS:

i {
    position: relative; /** ADD THIS TO i TAG. This do magic! It's necessary **/
}

i span {
    visibility: hidden;
    opacity:  0;
    position: absolute; /** It's necessary to do magic **/
    bottom: -32px; /** Show Tooltip 32px bottom "i" tag. Depends on "i" tag height =) **/
    left: 0;
    text-align: center; /** If You want tooltip text centered **/
    padding: 5px; /** Tooltip padding **/
    width: 150px; /** Tooltip width. You can set 100% to cover all "i" tag **/
    height: auto; /** Auto is good choice **/
    background: #000; /** Tooltip background **/
    color: #fff; /** Tooltip text color **/
}

i:hover span {
    visibility: visible;
    opacity: 1;
}

额外-完美!但我想要一个漂亮的动画(过渡)。我该怎么做?

添加到上面的CSS代码中,这行

i span {
    
    /** ... OTHER RULES SEE ABOVE ... **/

    transition-duration: 0.2s; /** Animation duration **/
    transition-property: opacity; /** Apply animation only on opacity rule **/
    
    /** Compatibility with other Browsers */
    -moz-transition-duration: 0.2s;
    -moz-transition-property: opacity;
    -o-transition-duration: 0.2s;
    -o-transition-property: opacity;
    -ms-transition-duration: 0.2s;
    -ms-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: opacity;
}

MEE 8 年前

</i> 在代码行中。如果你把它放在最后,它也不会工作,因为工具提示的文本将无法阅读。你必须这样做:

    <span class="tooltip"><i class="material-icons" ng-click="view(application._id)" >receipt</i><span class="tooltiptext">Tooltip text</span></span>&nbsp;&nbsp;

保罗

PS:它在我的电脑上工作。我为它制作了一把小提琴。 https://codepen.io/anon/pen/mBQboL . 我无法包括图标字体,但图标没有消失。

Liaqat Saeed 8 年前

位置跨度在…内一、

你在这方面有问题

 <i class="material-icons tooltip" ng-click="view(application._id)" >receipt</i><span class="tooltiptext">Tooltip text</span>&nbsp;&nbsp;

解决方案

  <i class="material-icons tooltip" ng-click="view(application._id)" >receipt<span class="tooltiptext">Tooltip text</span></i>&nbsp;&nbsp;