我有以下div:
<span data-placement="bottom" data-toggle="popover" data-container="body">Press Me!</span>
字符串下面是一个例子:
<div id="popover-content" class="hide"> ... </div>
型如何从弹出窗口中删除箭头?
x33g5p2x1#
.popover.bottom .arrow {visibility:hidden;}
5jvtdoz22#
您可以添加CSS,您可以选择弹出窗口,然后箭头。之后,您可以自定义箭头并最终隐藏它。
.popover .arrow { display: none; }
字符串
isr3a4wc3#
另一种方法是,如果您需要设置template popover选项,默认情况下是以下选项:
template
'<div class="popover"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>'
字符串您可以简单地排除以下div元素:
div
<div class="arrow"></div>
型如果您需要更多信息,您可以访问以下网站:https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php
3zwtqj6y4#
我正在使用reactstrap,这对我很有效:
<Popover ... hideArrow={true}>
k75qkfdt5#
使用react-bootstrap来到这里。这里是我的CustomTooltip组件与arrowHidden prop :(note Bootstrap 的Tootlip组件的arrowProps属性)
react-bootstrap
CustomTooltip
arrowHidden
Tootlip
arrowProps
import React from "react"; import { OverlayTrigger, Tooltip } from "react-bootstrap"; import { Placement } from "react-bootstrap/esm/types"; const CustomTooltip = ({ children, tooltipText, placement = "bottom", arrowHidden = true, }: { children: JSX.Element; tooltipText: string; placement?: Placement; arrowHidden?: boolean; }) => { return ( <OverlayTrigger placement={placement} overlay={(props) => ( <Tooltip id={`tooltip-id-${tooltipText}`} {...props} arrowProps={{ style: { display: arrowHidden ? "none" : "initial" } }} > {tooltipText} </Tooltip> )} > {children} </OverlayTrigger> ); }; export default CustomTooltip;
5条答案
按热度按时间x33g5p2x1#
.popover.bottom .arrow {visibility:hidden;}
5jvtdoz22#
您可以添加CSS,您可以选择弹出窗口,然后箭头。之后,您可以自定义箭头并最终隐藏它。
字符串
isr3a4wc3#
另一种方法是,如果您需要设置
template
popover选项,默认情况下是以下选项:字符串
您可以简单地排除以下
div
元素:型
如果您需要更多信息,您可以访问以下网站:
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php
3zwtqj6y4#
我正在使用reactstrap,这对我很有效:
字符串
k75qkfdt5#
使用
react-bootstrap
来到这里。这里是我的CustomTooltip
组件与arrowHidden
prop :(note Bootstrap 的
Tootlip
组件的arrowProps
属性)字符串