正文 

当前位置： 首页 > IT > java教程

带有css的动画工具提示

author author     2023-03-23     397

关键词：

This example shows you how to create custom tooltips, using just a pure CSS. In this examples we use "transform" feature of the CSS3 and some other tricks. Also you may find additional tooltip class provided, to show you the way you may customize this code.
  1. <style type="text/css">
  2. .tooltip-container {
  3.     /* Forces tooltip to be relative to the element, not the page */
  4.     position:relative;  
  5.     cursor:help;
  6. }
  7.  
  8. .tooltip {
  9.     display:block;
  10.     position:absolute;
  11.     width:150px;
  12.     padding:5px 15px;
  13.     left:50%;
  14.     bottom:25px;
  15.     margin-left:-95px;
  16.     /* Tooltip Style */
  17.     color:#fff;
  18.     border:2px solid rgba(34,34,34,0.9);
  19.     background:rgba(51,51,51,0.9);
  20.     text-align:center;
  21.     border-radius:3px;
  22.     /* Tooltip Style */
  23.     opacity:0;
  24.     box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
  25.     -webkit-transition:all 0.2s ease-in-out;
  26.     -moz-transition:all 0.2s ease-in-out;
  27.     -0-transition:all 0.2s ease-in-out;
  28.     -ms-transition:all 0.2s ease-in-out;
  29.     transition:all 0.2s ease-in-out;
  30.     -webkit-transform:scale(0);
  31.     -moz-transform:scale(0);
  32.     -o-transform:scale(0);
  33.     -ms-transform:scale(0);
  34.     transform:scale(0);
  35.     /* Reset tooltip, to not use container styling */
  36.     font-size:14px;
  37.     font-weight:normal;
  38.     font-style:normal;
  39. }
  40.  
  41. .tooltip:before, .tooltip:after{
  42.     content:"";
  43.     position:absolute;
  44.     bottom:-13px;
  45.     left:50%;
  46.     margin-left:-9px;
  47.     width:0;
  48.     height:0;
  49.     border-left:10px solid transparent;
  50.     border-right:10px solid transparent;
  51.     border-top:10px solid rgba(0,0,0,0.1);
  52. }
  53. .tooltip:after{
  54.     bottom:-12px;
  55.     margin-left:-10px;
  56.     border-top:10px solid rgba(34,34,34,0.9);
  57. }
  58.  
  59. .tooltip-container:hover .tooltip, a:hover .tooltip {
  60.     /* Makes the Tooltip slightly transparent, Lets the barely see though it */
  61.     opacity:0.9;
  62.     /* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
  63.     -webkit-transform:scale(1);
  64.     -moz-transform:scale(1);
  65.     -o-transform:scale(1);
  66.     -ms-transform:scale(1);
  67.     transform:scale(1);
  68. }
  69.  
  70. /* Custom Classes */
  71. .tooltip-style1 {
  72.     color:#000;
  73.     border:2px solid #fff;
  74.     background:rgba(246,246,246,0.9);
  75.     font-style:italic;
  76. }
  77. .tooltip-style1:after{
  78.     border-top:10px solid #fff;
  79. }
  80. </style>
  81.  
  82. <i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>
  83.  
  84. <em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>

如何使用css创建巧妙的动画提示框

...一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示，只使用HTML和CSS。  演示以下是我们的工作目标: 主要目标是拥有一种添加工具提示的简单方法，因此我们将通过添加自定义tooltip属性来做到这一... 查看详情

如何使用css创建巧妙的动画提示框

...一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示，只使用HTML和CSS。  演示以下是我们的工作目标: 主要目标是拥有一种添加工具提示的简单方法，因此我们将通过添加自定义tooltip属性来做到这一... 查看详情

相同的 CSS 动画没有相同的持续时间（带有动画背景颜色）

】相同的CSS动画没有相同的持续时间（带有动画背景颜色）【英文标题】：ThesameCSSanimationsdoesnothavethesamedurations(withanimatedbackgroundcolor)【发布时间】：2017-12-0620:55:48【问题描述】：我尝试用css动画制作两个块。它具有相同的transfor... 查看详情

CSS - 带有边框半径的动画比例

】CSS-带有边框半径的动画比例【英文标题】：CSS-Animationscalewithborder-radius【发布时间】：2019-03-1910:35:46【问题描述】：我正在制作一个带有缩放框的动画，它以8像素四舍五入。参考：https://codepen.io/anon/pen/ePGxqy。但是，当盒子展... 查看详情

带有角度材料工具提示的 ag 网格

】带有角度材料工具提示的ag网格【英文标题】：aggridwithangularmaterialtooltip【发布时间】：2019-04-2007:43:40【问题描述】：需要信息才能使用带有ag网格的mat工具提示，因为能够通过普通工具提示使用valueFormatter:this.tooltipFormatter,toolt... 查看详情

带有悬停的css闪烁动画

】带有悬停的css闪烁动画【英文标题】：cssflickerAnimationwithhover【发布时间】：2018-07-3003:08:50【问题描述】：我想要一个只有CSS的动画，它会在显示满时淡入淡出直到悬停。我可以分开做这两件事，但不能一起做。悬停元素永远... 查看详情

带有变换的css关键帧动画不适用于SVG

】带有变换的css关键帧动画不适用于SVG【英文标题】：csskeyframesanimationwithtransformnotworkingonSVG【发布时间】：2016-02-0709:51:36【问题描述】：当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充... 查看详情

带有渐变的CSS3动画[重复]

】带有渐变的CSS3动画[重复]【英文标题】：CSS3animationwithgradients[duplicate]【发布时间】：2011-08-0500:00:09【问题描述】：真的没有办法用CSS为渐变背景设置动画吗？类似：@-webkit-keyframespulse0%background:-webkit-gradient(linear,lefttop,leftbottom,c... 查看详情

带有 CSS 动画的媒体查询

】带有CSS动画的媒体查询【英文标题】：MediaquerieswithCSSanimations【发布时间】：2012-01-0115:26:53【问题描述】：我在这里尝试了一些繁重的CSS3内容，并遇到了一些我希望可以解决的问题：1-我有一个在您加载页面时会滑入的框。比... 查看详情

如何使用 CSS 在悬停时向图像添加工具提示

...增加大小。当用户将鼠标悬停在图像上时，我还希望显示带有图像描述的工具提示（我也应该能够定位工具提示）。HTML<divclass="bottle-container"><divc 查看详情

鼠标悬停时的SVG工具提示？

...发布时间】：2015-05-1105:43:09【问题描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不同。到目前为止，根本没有JS代码。现在我想在鼠标悬停在某个区... 查看详情

使用 tooltipster 的带有滚动条的工具提示

】使用tooltipster的带有滚动条的工具提示【英文标题】：tooltipwithscrollbarusingtooltipster【发布时间】：2016-06-2610:33:27【问题描述】：我必须使用tooltipsterjquery在工具提示中使用绑定html。但我必须在工具提示中绑定更多数据。如何使... 查看详情

带有 CSS 过渡动画的 D3

】带有CSS过渡动画的D3【英文标题】：D3withCSSTransitionAnimation【发布时间】：2015-07-1407:55:13【问题描述】：我正在使用D3创建气泡图。当我将鼠标悬停在每个气泡上时，会出现有关该气泡的一些信息，并且气泡的颜色会发生变化，... 查看详情

带有 css 的 Svg 动画 - 回退 IE

】带有css的Svg动画-回退IE【英文标题】：Svganimationwithcss-fallbacksIE【发布时间】：2016-04-0513:22:23【问题描述】：在CSS/SVG动画上回退IE不支持问题的最佳选择是什么？【问题讨论】：javascript::GreenSock-Snap.svg-Raphael.js-和jQuery，或具有SV... 查看详情

antd 表单项上带有工具提示的图标

】antd表单项上带有工具提示的图标【英文标题】：Iconwithtooltiponantdformitem【发布时间】：2021-05-0610:53:45【问题描述】：我正在使用Antd表单项，我必须放置一个带有工具提示的图标，如下所示：这是我的代码：<Itemlabel=\'Password\'... 查看详情

带有 HTML 的 Angular-ui 工具提示

】带有HTML的Angular-ui工具提示【英文标题】：Angular-uitooltipwithHTML【发布时间】：2013-10-0212:09:15【问题描述】：我目前正在我的应用程序中添加一些引导工具提示。所有“正常”的工具提示都可以，但是当我想使用tooltip-html-unsafe... 查看详情

带有 CSS 转换的圆形缩放动画 Chrome 错误

】带有CSS转换的圆形缩放动画Chrome错误【英文标题】：CirclescaleanimationChromebugwithCSStransforms【发布时间】：2013-02-2300:47:33【问题描述】：我在Chrome中使用简单动画时遇到了一些问题。我正在研究一个非常简单的预加载器，它包含... 查看详情

带有 HTML 工具提示的 Google 图表

】带有HTML工具提示的Google图表【英文标题】：GoogleChartwithHTMLtooltip【发布时间】：2015-02-1911:49:16【问题描述】：我正在尝试在我的谷歌图表中添加一个html工具提示，但这不起作用。我已经定义了启用HTML的列和选项，但这不起作... 查看详情