欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:961
  2. 浏览总数:11,484,594
  3. 评论:3873
  4. 分类目录:103 个
  5. 注册用户数:5843
  6. 最后更新:2018年10月17日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
大数据猿:
bigdata_ai

Balloon.css:用纯CSS写的tooltips

Balloon.css文件允许用户给元素添加提示,而这些在Balloon.css中完全是由CSS来实现,不需要使用JavaScript。

如何使用

1、提示的位置

提示的位置可以使用data-balloon-pos属性进行控制,这个属性的值可以是up, down, left或者right中的一个:




实现代码如下:

<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button>

2、提示框的长度

默认情况下,balloon.css 生成的提示符总是保持一行,而不管文本的实际长度。我们可以使用data-balloon-length属性来改变这一情况。data-balloon-length属性的值只能是small, medium, large或者fit中的一个。





实现代码如下:

<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button>
<button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button>

<button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button>

<button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button>

<button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width fill fit to element</button>

3、字体和图标

你甚至可以在提示里面使用任意的HTML特殊字符,或者是第三方的图标字体:


实现代码如下:

<button data-balloon="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Emojis: " data-balloon-pos="up">Hover me!</button>

下面是使用 Font Awesome的例子:

实现代码如下:

<button class="fa" data-balloon="Font Awesome: &#xf030; &#xf133; &#xf0a9; &#xf03e; &#xf15c;" data-balloon-pos="up">Hover me!</button>
本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【Balloon.css:用纯CSS写的tooltips】(https://www.iteblog.com/archives/1600.html)
喜欢 (6)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!
(3)个小伙伴在吐槽
  1. 我想修改balloon.min.css 的提示效果的背景颜色 怎么修改?
    . 再不疯狂就老了 أ2016-12-29 20:47 回复
    • 很好办,到balloon.min.css里面找到以下的代码
      [data-balloon]:before { filter: alpha(opactiy=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; pointer-events: none; -webkit-transition: all 0.18s ease-out; -moz-transition: all 0.18s ease-out; -ms-transition: all 0.18s ease-out; -o-transition: all 0.18s ease-out; transition: all 0.18s ease-out; background: rgba(17,17,17,0.9); border-radius: 4px; color: #fff; content: attr(data-balloon); font-size: 12px; padding: .5em 1em; position: absolute; white-space: nowrap; z-index: 10;}
      background: rgba(17,17,17,0.9); 就是你要修改的。
      w3970907702016-12-29 21:09 回复
      • 十分的感谢帮助。
        . 再不疯狂就老了 أ2016-12-30 09:24 回复