如何添加Tooltip提示框[css教程]

如何添加Tooltip提示框

如何添加Tooltip提示框[css教程]

通过CSSTooltip提示框,我们可以在页面中一些需要进行内容补充的地方添加一个符号,访客将鼠标移动到该符号或是点击该符号,即可查看相关补充内容。这一次的CSS笔记向大家介绍下相关内容。

  • 技术支持:菜鸟教程:https://www.runoob.com/css/css-tooltip.html

方案一:链接法

这种提示框CSS很好展示,给一个问好加上园圈就好了,例如这样:

  1. <a target="_blank" href="https://www.dungei.ink/#"style="display: inline-block;
  2. width: 18px;
  3. height: 18px;
  4. line-height: 18px;
  5. background: hsla(0,0%,100%,.1);
  6. text-align: center;
  7. color: #111;
  8. font-family: REEJI-BigYoung-BoldGB;
  9. font-size: 14px;
  10. border: 1px solid;
  11. border-radius: 100%; ">?</a>

方案二:文本提示

当然,如果只是一些简单的提醒,专门做个页面进行介绍就不太适合了,可以试试这个,当鼠标移到到图标上,就有文本提示:

  1. <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content">
  2. <span class="tip-content-inner">
  3. Tooltip提示框
  4. </span>
  5. </span>
  6. </span>
  7. <style type="text/css">
  8. .tooltip{
  9. position: relative;
  10. display: inline-block;
  11. margin-left: 5px;
  12. margin-right: 5px;
  13. height: 16px;
  14. line-height: 16px;
  15. vertical-align: middle;
  16. }
  17. .tooltip-icon{
  18. display: block;
  19. width: 14px;
  20. height: 14px;
  21. line-height: 14px;
  22. border: 1px solid #999;
  23. border-radius: 50%;
  24. font-size: 12px;
  25. font-weight: 700;
  26. font-family: "caption", Arial;
  27. text-align: center;
  28. }
  29. .tip-content{
  30. z-index: 999999;
  31. display: none;
  32. position: absolute;
  33. left: -5px;
  34. bottom: 30px;
  35. width: 240px;
  36. }
  37. .tip-content-inner{
  38. position: absolute;
  39. bottom: 0;
  40. left: 0;
  41. display: block;
  42. width: auto;
  43. max-width: 200px;
  44. padding: 10px;
  45. line-height: 20px;
  46. border: 1px solid #ccc;
  47. background: #fff;
  48. line-height: 20px;
  49. color: #333;
  50. font-size: 16px;
  51. }
  52. .tip-content-inner:before{
  53. content: "";
  54. position: absolute;
  55. left: 7px;
  56. bottom: -24px;
  57. border-style: solid solid solid solid;
  58. border-color: #ccc transparent transparent transparent;
  59. border-width: 12px 6px;
  60. }
  61. .tip-content-inner:after{
  62. content: "";
  63. position: absolute;
  64. left: 8px;
  65. bottom: -20px;
  66. border-style: solid solid solid solid;
  67. border-color: #fff transparent transparent transparent;
  68. border-width: 10px 5px;
  69. }
  70. .tooltip:hover > .tip-content{
  71. display: block;
  72. }
  73. </style>

原文地址:https://www.npc.ink/16771.html

WEB前端

VUE+element-ui+java价值一千的校园信息发布平台毕业设计前端[web前端]

2020-6-29 10:49:11

WEB前端

限制F12网页调试,实现按下F12自动关闭网页或跳转到其他指定页面

2020-12-15 22:11:33

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索