对于提示框的一些自我理解

对于一些网页来说,由于美观,使用了一些小的图标、组件之类,但具体作用又不好描述时,就可以使用一些提示框来向用户展示其功能。

我经常使用的提示框主要有html中title属性、bootstrap的工具提示toolitips以及bootstrap的弹出框popover,其中toolitips和popover类似

1:html自带的title属性

对于自带的title属性比较简单,主要就是提示一些简单的文字提示,通常用于输入格式、链接目标的提示

2:bootstrap的工具提示toolitips,bootstrap的弹出框popover

对于提示工具toolitips,相比较title属性复杂一点。它里面包含了较多的属性,其中title属性和html属性类似,至于不同则包含了更多属性

例如:

使用频率不高的属性:

animation:主要是显示的动画效果,其值主要为布尔类型,默认值为false

经常使用的属性:

container:主要是为其指定一个父容器,在其盒子挤压状态下,可以让其值为body,扩大容器面积,唯一不足就是在body时会造成滚动,提示框位置在展示时不固定,会随屏幕的滚动而滚动,默认值为false,也可以设置为字符串(例如类、标签名等)

html:主要是指定是否可以插入dom节点。值是布尔类型,默认为false

placement:指定提示框位于该DOM节点的位置,值可以为字符串和函数,一般使用上下左右自动为多,默认状态为top,在auto时一般为left,在左侧不能显示时会改为right

trigger:是触发方式,一般为hover 和focus、click,也可以具体指定(在提示框toolitips默认为hover,在popover下默认为click)

content:提示框文本内容,一般在提示内容较多、且大多为HTML结构时使用(目前主要是在popover里面使用过,在toolitips文档中暂时没有看到关于它的描述,所以不确定是不是两个工具框都有这个属性)。如果不想有滚动问题、或者不好处理其样式问题的话,这部分内容可以使用dropdown来解决

对于这两者的展现方式,目前使用了js来写,具体的文档有,相对来讲比较简单`

从没使用过的属性:

selector、template、viewport

暂时不清楚其具体意义与用法

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容