最新的Web开发教程
 

Bootstrap JS Popover

❮上一页 下一页参考❯

JS Popover (popover.js)

该Popover插件是类似工具提示; 这是当用户点击一个元素上会出现一个弹出框。 所不同的是，该popover可包含更多的内容。

插件的依赖： Popovers需要提示插件(tooltip.js)被列入您的版本Bootstrap 。

对于有关教程Popovers ，请阅读我们Bootstrap Popover教程 。

通过data-*属性

该data-toggle="popover"激活popover 。

该title属性指定的标题文字popover 。

的data-content属性指定应的内侧显示的文本popover's身体。

例

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
试一试»

通过JavaScript

Popovers不仅是CSS-插件，因此必须用jQuery初始化：选择指定的元素，并调用popover()方法。

例

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
试一试»

Popover选项

选项可以通过数据属性或JavaScript进行传递。 对于数据属性，选项名称追加到data-在data-placement=""

名称 类型 默认 描述 尝试一下
animationbooleantrue

指定是否添加CSS淡入淡出过渡效果打开和关闭时popover

  • 真 - 添加渐变效果
  • 假的 - 不要添加渐变效果
尝试一下
containerstring, or the boolean falsefalse 追加popover到一个特定的元素。
例如：容器： 'body' 		尝试一下
contentstring"" 指定中的文本popover's body 尝试一下
delaynumber, or object0 指定毫秒将采取打开和关闭的次数popover 。

以指定开口的延迟和另一个用于闭合，使用对象结构：

delay: {show: 500, hide: 100} -这将需要500毫秒开popover ，但只有100毫秒关闭 		尝试一下
htmlbooleanfalse 指定是否接受HTML标签的popover ：
  • true -接受HTML标签
  • false -不接受HTML标签
注：HTML必须在标题属性中插入（或使用标题选项）。

当设置为false（默认），jQuery的text()将被使用的方法。 如果你担心XSS攻击使用此 		尝试一下
placementstring"right" 指定popover位置。 可能的值：

  • "top" - Popover之上
  • "bottom" - Popover的底部
  • "left" - Popover左
  • "right" - Popover右边
  • "auto" -让浏览器决定的位置popover 。 例如，如果值是"auto left"时， popover将显示在左侧可能时，否则在右边。 如果该值是"auto bottom" ，所述popover将显示在可能的情况下，否则在顶
尝试一下
selectorstring, or the boolean falsefalse 加popover到指定的选择 尝试一下
templatestring  基本HTML创建的酥料饼时使用。

该popover's标题将被注入到.popover标题。

的popover's内容将被注入.popover内容。

.arrow将成为popover's箭头。

最外层的包装元素应该有.popover类。
titlestring"" 指定的标题文字popover 尝试一下
triggerstring"click" 指定如何popover被触发。 可能的值：

  • "click" -激活popover用点击
  • "hover" -激活popover悬停
  • "focus" -激活popover时，它获得焦点（按Tab键或单击.eg）
  • "manual" -激活popover手工
提示：要传递多个值，它们用空格分隔 		尝试一下
viewportstring, or object{selector: "body", padding: 0} 保持popover此元素的边界之内。

例如： viewport: '#viewport'或{selector: '#viewport', padding: 0}

Popover方法

下表列出了所有可用的popover方法。

方法 描述 尝试一下
.popover( options ) 激活与一个选项酥料饼。 见上面的有效值选项 尝试一下
.popover("show") 显示popover 尝试一下
.popover("hide") 隐藏popover 尝试一下
.popover("toggle") 切换的酥料饼 尝试一下
.popover("destroy") 隐藏和破坏酥料饼 尝试一下

Popover活动

下表列出了所有可用的popover事件。

事件 描述 尝试一下
show.bs.popover 当发生popover即将被显示 尝试一下
shown.bs.popover 发生时， popover尽显（后CSS过渡已经完成） 尝试一下
hide.bs.popover 当发生popover是要隐藏 尝试一下
hidden.bs.popover 当发生popover被完全隐藏（CSS后过渡已经完成） 尝试一下
例子

例子

自Popover设计

使用CSS来定制的外观popover ：

例

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
试一试»

❮上一页 下一页参考❯