首页 > 其他分享 >纯css实现Tooltip提醒

纯css实现Tooltip提醒

时间:2023-09-30 21:44:23浏览次数:35  
标签:提醒 color Tooltip tooltip tooltiptext border css left

<!DOCTYPE html>
<html>
<style>
.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: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
    /* 淡入工具提示 - 用 .5 秒从完全不可见变为可见: */
  opacity: 0;
  transition: opacity .5s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

 

标签:提醒,color,Tooltip,tooltip,tooltiptext,border,css,left
From: https://www.cnblogs.com/tcyweb/p/17738275.html

相关文章

  • WebKit Inside: CSS 样式表解码字符集
    CSS样式表引入有3种方式:外部样式表、内部样式表、行内样式,不同的引入方式,解码样式表的字符集原理不一样。外部样式表外部样式表由link标签引入,当WebKit解析到link标签时就会构造CachedCSSStyleSheet对象。这个对象持有CachedResourceRequest对象和TextResourceDec......
  • CSS 基础 4 - CSS 常用单位
    CSS基础4-CSS常用单位px:基础单位em:相对当前父容器的系数,可以累乘rem:相对根<html>的系数,方便计算vw/vh:viewportwidth/height,整个浏览器的大小,取值范围1-100如100vh,占满高度,如果出现滚动条,是因为body预设的padding和margin如30%宽度的侧边栏:height:100vh;......
  • CSS 基础 3 - 定位 Postion 属性
    CSS基础3-定位Postion属性staticposition属性的默认值,元素随HTML流移动top/left/right/bottom属性无效relative和static类似,元素随HTML流移动。区别:比static多了top/left/right/bottom(设定偏移量)【父相子绝】【可以作为父元素,让内部的absolute元素根......
  • 盒子模型-CSS
    /*内边距/padding:20px;/边框/border:20pxsolidblack;/外边距*/margin:50px;/*实线//border:10pxsolid#000;//虚线//border:10pxdashed#000;//点线*/border:10pxdotted#000;/*上下左右*/border-top:10px......
  • sass_scss_less
    title:Sass(Scss)、Less的区别与选择+基本使用tags:[CSS,Sass,Scss,Less]categories:可回收物keywords:css,sass,scss,lessdescription:Sass(Scss)、Less的区别与选择+基本使用date:2020-12-3112:20:31{%noteinfono-icon%}Sass(Scss)、Less都是CSS预处......
  • 巧用CSS的Border属性
    制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面将通过实例来说明其应......
  • 等待多个元素 放入一个列表 WebDriverWait(driver,10).until(EC.visibility_of_all_el
     这里需要百度的热点新闻标题是多个元素    #导包fromseleniumimportwebdriverfromselenium.webdriver.common.byimportByfromselenium.webdriver.support.uiimportWebDriverWaitfromselenium.webdriver.supportimportexpected_conditionsasEC......
  • CSS 基础 1 - Block & Inline
    CSS基础1-Block&Inlinedisplay:inline/block/inline-block/none/flex/grid;blockblock元素独占一行,即使两个元素宽度都小于50%也不会左右并排block元素可以单独设置width、height属性。宽度默占父元素100%;高度取决于block内容常见block标签:<div>、<p>、<......
  • 人人FED CSS编码规范
    浏览器特效支持规范为了页面性能考虑,如果浏览器不支持CSS3相关属性的,则该浏览器的某些特效将不再支持,属性的支持情况如下表所示: 圆角阴影动画文字阴影透明背景渐变空间变换Chrome5+YYYYYYYFirefox4+YYYYYYYSafari5+YYYYYYYOperaYYYYYNYIE9+YYNNYNYChrome5-NNYYYYYFirefox4-NN......
  • By.CSS_SELECTOR 定位查找元素 并输出文本
     代码 定位到元素后打印出文字defget_text(self):element=driver.find_element(By.CSS_SELECTOR,"#sidebar_bh[href*='vip']")print(element.text) ......