css实现鼠标hover，出现tip ， tooltip-data的用法

已于 2022-04-25 14:47:51 修改
阅读量2.1k 收藏
点赞数 2
分类专栏： css 文章标签： css3
于 2022-04-25 14:00:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014645827/article/details/124403592
版权

 

<html>

<head>

<title></title>

<style>

.tooltip {

  position: relative;

  border-bottom: 1px dotted black;

}

.tooltip::before{

  content: attr(tooltip-data);

    background-color: #fff;

    width: 125px;

    min-height: 40px;

    position: absolute;

    bottom: 24px;

    display: flex;

    left: -25px;

    padding: 8px 53%;

    opacity: 0;

    justify-content: center;

    transition: opacity .5s;

    align-items: center;

    border: 1px solid #dedede;

    border-radius: 5px;

    visibility: hidden;

}

.tooltip:after {

  content: "";

  position: absolute;

  bottom: 15px;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  opacity: 0;

  transition: opacity .5s;

  border-color: #000 transparent transparent transparent;

  visibility: hidden;

}

.tooltip:hover::before,.tooltip:hover::after{

    opacity: 1;

    visibility: visible

}

</style>

</head>

<body>

  <h1>

    HTML/CSS tooltip

  </h1>

  <p>

    Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip.

  </p>

  <p>

    You can also hover <span class="tooltip" tooltip-data="This is another Tooltip ContentThis is another Tooltip  ">here</span> to see another example.

  </p>

</body>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

</script>

</html>

小小1992
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css+html鼠标悬停tips
weixin_43641850的博客
12-03 1579
某2020前端互助群的每周议题(三) Part 2 题目 实现一个鼠标悬停的功能，如图 要求：只使用CSS和HTML 可以贴出代码的实现地址例如https://codepen.io/ 上提交自己的代码 实现 我的实现 思路 1.初步实现 hover后出现文本提示，考虑使用伪元素:after来实现 :after这是css2的写法，css3是::after <style> .wrap { } .wrap img { width: 1em;
css常用浮出层(tip效果)的写法
09-25
浮出层是web页面中经常用到的功能，带有小小尖角的浮出层则更为生动，所以今天带给大家的是有角的浮出层，一起看看吧
纯css实现tooltip提示（鼠标hover显示提示信息）
热门推荐
遇见小美好
11-29 1万+
工作中常常会遇到这样的需求：鼠标hover显示提示信息，这个常见的需求利用css的after伪类即可实现。 举例效果如下： 实现起来也非常简单。主要用到css的after伪类，把要显示的内容放到 content属性里即可。 示例代码如下： html部分： &lt;table border="1"&gt; &lt;thead&gt; &lt;tr&gt; ...
《CSS 知识点》仅在文本有省略号时添加 tip 信息
最新发布
前端技术
04-08 552
仅在文本有省略号时添加 tip 信息
CSS基础学习--20 提示工具(Tooltip)
yyxhzdm的博客
06-18 3098
提示工具在鼠标移动到指定元素后触发，总共四种样式实例： 提示框在鼠标移动到指定元素上显示 HTML- 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。CSS-tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。tooltiptext
CSS实例：非常不错的鼠标悬停TIP效果
UFO
07-30 5562
我们可以为我们的链接加上这样的效果，以更加体现网页的亲和力与易用性。我们也可以在提供下载的链接下提供这样的tip提示。我们看这样的鼠标悬停TIP效果是如何实现的。看下面的XHTML代码：  Example Source Code [www.52css.com] Div+CSS教程52CSS.com Div+CSS教程 　　在链接A标签中，嵌套了span与p标签，这就是我们
css超出部分隐藏，鼠标放上去展示全部？
weixin_46699674的博客
11-08 1877
/ 设置默认宽度，具体宽度多少自己设置。// 防止宽度过大文字居中。
CSS修改鼠标悬停时title属性的展示样式
weixin_53874202的博客
07-15 5962
鼠标悬停title属性展示样式
css基础 CSS 提示工具(Tooltip)
wgchen
04-27 1710
阅读目录CSS 提示工具(Tooltip)基础提示框(Tooltip)实例解析定位提示工具添加箭头实例解析淡入效果 CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。 基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title
使用CSS content的attr实现鼠标悬浮提示（tooltip）效果
09-22
在网页设计中，鼠标悬浮提示（Tooltip）是一种常见的交互效果，它可以在用户将鼠标悬停在某个元素上时显示额外的信息。通常，这种效果可以通过JavaScript库或者CSS来实现。本篇将详细介绍如何利用CSS的`content`属性...
echarts-tooltip-carousel.js
03-11
echarts动画制作
simple-tooltip-css:一个简单的工具提示只有 css
07-07
link rel= " stylesheet " type= " text/css " href= " /bower_components/simple-tooltip-css/dist/css/simple-tooltip.min.css " > ` 在你想要的元素上插入属性data-simpletooltip ...
leaflet-tooltip-layout:传单避免重叠的工具提示
05-06
npm i leaflet-tooltip-layout --save # or yarn add leaflet-tooltip-layout 或者，您可以仅将./lib/index.js复制到您的项目中，然后将其重命名为所需的名称。 入门 ES6 import * as tooltipLayout from 'leaflet...
CSS实现鼠标放上去显示提示工具
qingdouxiaohua的博客
11-07 1387
【代码】CSS实现鼠标放上去显示提示工具。
CSS常用浮出层的写法
weixin_30764771的博客
07-28 116
贴上HTML： <div class="poptip"> <span class="poptip-arrow poptip-arrow-top">◆<i>◆</i></span> <span class="poptip-arrow poptip-arrow-r...
css鼠标悬停出现区域,css伪元素实现鼠标悬停出现对话框
weixin_39793189的博客
08-04 658
iconfont icon-shezhi是引入阿里图库的图标修改密码退出登录css.icon{color:#aaa;font-size: 24px;padding: 10px;}.icon:hover .dialaing{display: block;}.dialaing{margin-top: 10px;font-size: 16px;display: none;margin-left: -5...
两种纯CSS方式实现hover图片pop-out弹出效果
dragonir
10-21 1814
实现原理 主要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素使用伪元素 figure::before 表示， 前景元素使用 figure img 表示，当鼠标 hover 悬浮至 figure 元素时，背景元素产生变大效果，前景元素产生变大并向上移动效果，从而从视觉上实现弹出效果。 背景元素 figure::before 前景元素 figure img 1. 使用 overflow: hidden 方式 主体元素的 html 结构由一个 figure 元素包裹的 img 元素构成： &.
CSS 提示工具(Tooltip)
前端小99的博客
04-18 1275
基础提示框(Tooltip) 实例解析 HTML) 使用容器元素 (like ) 并添加 "tooltip" 类。在鼠标移动到 上时显示提示信息。 提示文本放在内联元素上(如 ) 并使用class="tooltiptext"。 CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:abs
vue中轻松搞掂鼠标气泡框提示框tip跟随
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-16 1万+
<template> <div> <!-- 提示框 --> <sg-tip :show="isShowTip">{{tipContent}}</sg-tip> <!-- 移入某个元素触发显示跟随提示框显示--> <div class="red" @mouseover="showTip($event.target.innerText)" @mouseout=".
show-tooltip-when-overflow 和show-tooltip-overflow 的区别
12-13
show-tooltip-when-overflow和show-tooltip-overflow都是用于处理表格内容过多导致换行不美观的情况，但它们的作用略有不同。 - show-tooltip-when-overflow属性作用于表格中的单元格，当单元格内容超出单元格宽度时，会以tooltip的形式显示单元格内容，从而避免了内容换行导致的不美观问题。 - show-tooltip-overflow属性作用于表格中的列，当列中的单元格内容超出列宽度时，会以tooltip的形式显示该列的所有单元格内容，从而避免了内容换行导致的不美观问题。 <<示例>> ```html <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td show-tooltip-when-overflow>Name1</td> <td show-tooltip-when-overflow>Age1</td> <td show-tooltip-when-overflow>Address1</td> </tr> <tr> <td show-tooltip-when-overflow>Name2</td> <td show-tooltip-when-overflow>Age2</td> <td show-tooltip-when-overflow>Address2</td> </tr> </tbody> </table> <table> <thead> <tr> <th show-tooltip-overflow>Name</th> <th show-tooltip-overflow>Age</th> <th show-tooltip-overflow>Address</th> </tr> </thead> <tbody> <tr> <td>Name1</td> <td>Age1</td> <td>Address1</td> </tr> <tr> <td>Name2</td> <td>Age2</td> <td>Address2</td> </tr> </tbody> </table> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值