Popover 弹出框

弹出框组件，用于显示更多内容，支持多种触发方式和位置。

基础用法

<button id="demo-popover">点击显示弹出框</button>

<script>
  const popover = new SaPopover('#demo-popover', {
    content: '这是弹出框内容'
  });
</script>

加载 SanoUI 组件中...

不同位置

通过 placement 配置弹出框显示位置。

<button id="demo-top">Top</button>
<button id="demo-bottom">Bottom</button>
<button id="demo-left">Left</button>
<button id="demo-right">Right</button>

<script>
  new SaPopover('#demo-top', {
    content: '顶部弹出框',
    placement: 'top'
  });
  
  new SaPopover('#demo-bottom', {
    content: '底部弹出框',
    placement: 'bottom'
  });
  
  new SaPopover('#demo-left', {
    content: '左侧弹出框',
    placement: 'left'
  });
  
  new SaPopover('#demo-right', {
    content: '右侧弹出框',
    placement: 'right'
  });
</script>

加载 SanoUI 组件中...

不同触发方式

通过 trigger 配置弹出框触发方式。

<button id="demo-click">点击触发</button>
<button id="demo-hover">悬停触发</button>
<input id="demo-focus" type="text" placeholder="聚焦触发">

<script>
  // 点击触发
  new SaPopover('#demo-click', {
    content: '点击触发',
    trigger: 'click'
  });
  
  // 悬停触发
  new SaPopover('#demo-hover', {
    content: '悬停触发',
    trigger: 'hover'
  });
  
  // 聚焦触发
  new SaPopover('#demo-focus', {
    content: '聚焦触发',
    trigger: 'focus'
  });
</script>

加载 SanoUI 组件中...

带标题的弹出框

通过 title 配置弹出框标题。

<button id="demo-title">显示带标题的弹出框</button>

<script>
  const popover = new SaPopover('#demo-title', {
    title: '标题',
    content: '这是弹出框内容'
  });
</script>

加载 SanoUI 组件中...

HTML 方式

通过 HTML 属性方式使用，更简洁。

<button data-popover="这是弹出框内容">HTML 方式</button>
<button data-popover="点击触发" data-popover-trigger="click">点击触发</button>
<button data-popover="顶部位置" data-popover-placement="top">顶部位置</button>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaPopoverOptions	{}

配置选项

参数	说明	类型	可选值	默认值
content	弹出框内容	string	-	''
title	弹出框标题	string	-	''
placement	显示位置	string	top / bottom / left / right / top-start / top-end / bottom-start / bottom-end / left-start / left-end / right-start / right-end	top
trigger	触发方式	string	click / hover / focus / manual	click
offset	偏移距离	number	-	12
disabled	是否禁用	boolean	-	false

方法

方法名	说明	参数	返回值
show	显示弹出框	-	void
hide	隐藏弹出框	-	void
updateContent	更新弹出框内容	content: string	void
setDisabled	设置禁用状态	disabled: boolean	void
destroy	销毁实例	-	void

自动初始化属性

属性	说明	类型	默认值
data-popover	弹出框内容（启用自动初始化）	string	-
data-popover-placement	显示位置	string	top
data-popover-trigger	触发方式	string	click
data-popover-title	弹出框标题	string	-

示例代码

手动创建实例

const popover = new SaPopover('#my-button', {
  title: '标题',
  content: '这是弹出框内容',
  placement: 'top',
  trigger: 'click'
});

// 显示弹出框
popover.show();

// 隐藏弹出框
popover.hide();

// 更新内容
popover.updateContent('新的弹出框内容');

自动初始化

<button data-popover="这是弹出框内容">按钮</button>
<button data-popover="点击触发" data-popover-trigger="click">点击触发</button>
<button data-popover="悬停触发" data-popover-trigger="hover">悬停触发</button>
<button data-popover="顶部位置" data-popover-placement="top">顶部位置</button>
<button data-popover="带标题" data-popover-title="标题">带标题</button>

<script>
  SA.init('body');
</script>

动态内容

const popover = new SaPopover('#my-button', {
  content: '初始内容'
});

// 根据状态更新内容
function updatePopoverContent(status) {
  const content = status === 'online' 
    ? '用户在线' 
    : '用户离线';
  popover.updateContent(content);
}

实际使用场景

场景 1：操作说明

在操作按钮上显示详细的操作说明。

<button class="sa-button sa-button--primary" id="action-btn" data-icon="edit">编辑</button>

<script>
  SA.init('body');
  
  new SaPopover('#action-btn', {
    content: '点击此按钮可以编辑当前选中的项目',
    placement: 'top',
    trigger: 'hover'
  });
</script>

加载 SanoUI 组件中...