Bootstrap 5 పాప్అప్

弹出框

弹出框（Popover）组件类似于工具提示；它是一种弹出框，当用户点击元素时出现。不同之处在于弹出框可以包含更多内容。

如何创建弹出框

如需创建弹出框，请将 data-bs-toggle="popover" 属性添加到元素。

ఉపయోగించండి title 属性规定弹出框的标题文本，并使用 data-bs-content 属性规定在弹出框正文中显示的文本：

గమనిక:弹出框必须用 JavaScript 初始化才能工作。

以下代码将启用文档中的所有弹出框：

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

定位弹出框

默认情况下，弹出框会出现在元素的右侧。

ఉపయోగించండి data-bs-placement అనునాదు సెట్టింగ్ పాప్‌అప్ పోసిషన్ పైన, క్రిందన, ఎడమ లేదా కుడివైపు నిర్ణయించండి:

ఉదాహరణ

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">పైన</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">క్రింది</a>
<a href="#" title="హెడర్" data-bs-toggle="popover" data-bs-placement="left" data-content="కంటెంట్">ఎడమ</a>
<a href="#" title="హెడర్" data-bs-toggle="popover" data-bs-placement="right" data-content="కంటెంట్">కుడి</a>

స్వయంగా ప్రయత్నించండి

గమనిక:స్థలం తక్కువగా ఉండినప్పుడు, placement అంశం మీ ఆశించిన పద్ధతిలో పని చేయదు. ఉదాహరణకు: మీరు పేజీ పైన (ఎటువంటి స్థలం లేకపోతే) top placement అంశాన్ని ఉపయోగించినప్పుడు, అది ఎలమెంట్ క్రింద లేదా ఎడమ వైపు (ఏదైనా స్థలం ఉన్న స్థానంలో) పోపవ్ చూపిస్తుంది.

పోపవ్ మూసించడం

అప్రమేయంగా, ఎలమెంట్ పైన మళ్ళీ క్లిక్ చేసినప్పుడు పోపవ్ మూసిపోతుంది. కానీ, మీరు ఉపయోగించవచ్చు data-bs-trigger="focus" అంశం ద్వారా, పైన క్లిక్ చేసినప్పుడు పోపవ్ మూసిపోతుంది అనే అంశాన్ని సెట్ చేయడానికి అనుమతిస్తుంది:

ఉదాహరణ

<a href="#" title="డిస్మిసిబుల్ పోపవ్" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="డాక్యుమెంట్ లోని ఏ స్థానంలోనైనా క్లిక్ చేసినప్పుడు పోపవ్ మూసిపోతుంది">నాకు క్లిక్ చేయండి</a>

స్వయంగా ప్రయత్నించండి

హోవర్ పోపవ్

సూచన:మీరు మౌస్ పింటర్ ఎలమెంట్ పైన జరిపించిన ముసాయిదాను చూపించడానికి ఉద్దేశించబడిన విలువను ఉపయోగించండి "hover" యొక్క data-bs-trigger అంశం:

ఉదాహరణ

<a href="#" title="హెడర్" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="పోపవ్ టెక్స్ట్">నా పైన ముసాయిదా చేరుస్తుంది</a>

స్వయంగా ప్రయత్నించండి