Bootstrap弹出框 - 去除箭头

Question

我有以下的div:

<span data-placement="bottom" data-toggle="popover" data-container="body">Press Me!</span>

带有以下弹出窗口：

  <div id="popover-content" class="hide"> ... </div>

如何从气泡窗口中删除箭头？

- Urbanleg

---

请提供更多的代码来描述您的问题。 - Bhavin Shah

请提供一个jsfiddle，以便我们能够理解。 - mkawa

Answer 1

.popover.bottom .arrow {visibility:hidden;}

- Jake Taylor

Answer 2

您可以添加CSS，选择弹出框和箭头。之后，您可以自定义箭头并最终隐藏它。

.popover .arrow {
    display: none;
}

- David Prieto

Answer 3

另一种方法是，如果您需要设置默认为以下选项的template弹出选项，则可以这样做：

'<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title"></h3>
  <div class="popover-content"></div>
</div>'

您可以简单地排除以下

元素：

<div class="arrow"></div>

如果您需要更多信息，可以访问以下网站：

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php

- vchan

Answer 4

我正在使用reactstrap，这对我有用：

<Popover ... hideArrow={true}>

- Victoria Lamanova

Answer 5

使用了`react-bootstrap`来到这里。这是我的`CustomTooltip`组件，带有`arrowHidden`属性：

（注意`bootstrap`的`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;

- Filip Savic