标签: popper.js

我已经安装了bootstrap v4 beta和popper.js(tooltip.js)库.我正在尝试使用它的工具提示功能.所以我设法让它出现,但我不能改变它的外观/风格为我的生活.我已多次查看他们的文档,但我无法弄明白.(我只是讨厌一个没有例子的所谓"文档").所以这是我的HTML:

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span>

我在js中的数据切换上激活了它:

$(function() {
    $('[data-toggle="tooltip"]').tooltip()
})

我注意到,当工具提示出现时,使用类"tooltip ..."创建了一个新的div,所以我认为我可以将该类作为目标并在我的scss中设置样式,所以:

.tooltip {
    background-color: #DB2828;
    color: $green;  
}

不是我想要的样式选项,只是经过测试才能看到它的效果......结果如下:

同样的黑色背景与我背后的测试背景......有人可以帮我解决这个问题吗？非常感谢.

我的package.json包含:

 "dependencies": {
    "popper": "^1.0.1",
    "bootstrap": "^4.1.0",

安装警告是:

bootstrap@4.1.0需要popper.js@^1.14.0的对等体

但是popper.js的"最新"版本是1.0.1

WTF？!？有两种不同的'风味'波普尔？

我试图建立一个TypeScript项目并在Visual Studio Code中与Popper，jQuery和Knockout一起使用bootstrap 4 。

我安装了剔除，jquery和bootstrap类型定义，

npm install -–save @types/knockout
npm install -–save @types/jquery
npm install --save @types/bootstrap

在require.js配置中引用了JS文件

declare var require: any;
require.config({
    paths: {
        "knockout": "externals/knockout-3.5.0",
        "jquery": "externals/jquery-3.3.1.min",
        "popper.js": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
        "bootstrap": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    }
})

我的tsconfig.json是这样的：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { 
            "*": ["types/*"] 
        },
        "outDir": "./built/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "amd",
        "target": "es5"
    },
    "files":[
        "src/require-config.ts",
        "src/hello.ts"
    ]
}

我去编译该项目，但出现以下错误：

node_modules/@types/bootstrap/index.d.ts:9:25 - error TS2307: Cannot find module 'popper.js'. …

我正在尝试遵循 Popper.js 文档中的示例，了解如何使用 usePopper 钩子实现此处找到的箭头：

https://popper.js.org/react-popper/v2/

我尝试将其放入代码框中，然后 console.log the styles.arrow 并看到它正在打印：

{position: "absolute", top: "", left: "0", transform: "translate3d(50px, 0px, 0)"}

因此，我将此代码添加到我的应用程序中，该代码位于打字稿中，如下所示：

 const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      {
        name: 'arrow',
        options: {
          element: arrowElement,
        },
      },
    ],
  });

但是，当我在这里 console.log styles.arrow 时，它返回未定义。我感觉这里有什么问题。我声明有什么错误吗？

在 Popper.js 2 文档中，我看到一个小提示，表明支持附加到正文：

https://popper.js.org/docs/v2/performance/#attaching-elements-to-the-dom

但是，我找不到任何如何完成此操作的示例。

有人可以提供一个将 Popper.js 版本 2 弹出窗口附加到正文的示例吗？

我试图通过requirejs加载jquery,popperjs和bootstrap(v4-beta),并在控制台中我不断得到:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.js:6
    at bootstrap.js:6
    at bootstrap.js:6

这是我的主要代码:

requirejs.config({

  paths: {
    'jquery': 'lib/jquery',
    'popper': 'lib/popper',
    'bootstrap': 'lib/bootstrap'
  },

  shim: {
    'bootstrap': ['jquery', 'popper']
  }

});

requirejs(['jquery', 'popper', 'bootstrap'], function(jquery, popper, bootstrap) {});

关于使用requirejs加载popper.js和bootstrap的问题,已经多次询问过这个问题. 是的,我正在使用此处引用的umd版本.

一切都正确加载到页面中:

<script data-main="js/main.js" src="js/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="popper" src="js/lib/popper.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="js/lib/bootstrap.js"></script>

我很困惑为什么我仍然会收到此错误,并开始认为这是我的require配置.有任何想法吗？

Fullcalendar React 组件：

import FullCalendar from "@fullcalendar/react";
import timeGrid from "@fullcalendar/resource-timegrid";
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';

class FC extends React.Component {
  calendarComponentRef = React.createRef();

  constructor(props) {
    super(props);    
    this.state = {
        events:[{ "id": 1, "title": "event 1", "description":"some description"},......]
    }  
  }

  eventRender(info){
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body'
    });
  }

  render() {
    return <FullCalendar                  
          events={this.state.getEvents}          
          defaultView="resourceTimeGridDay"
      plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
          eventRender={this.eventRender}
          schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
        />

  }
}

标题中包含的 Tooltip.js

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script rc="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js">/script>

正是在反应中尝试这个演示，但它在反应版本中不起作用。

但工具提示不起作用 …

我有以下代码javascript

console.log(dates)
domain = Object.entries(dates)
console.log(domain)

在哪里：

dates = {
    "0": "2003-02-01T05:00:00.000Z",
    "1": "2003-03-01T05:00:00.000Z",
    "2": "2003-04-01T05:00:00.000Z"
}

奇怪的是，

domain = [
    ["0", "2003-02-01T05:00:00.000Z"],
    ["1", "2003-03-01T05:00:00.000Z"],
    ["2","2003-04-01T05:00:00.000Z"],
    "0",
    "1",
    "2"
]

console.log(dates)
domain = Object.entries(dates)
console.log(domain)

dates = {
    "0": "2003-02-01T05:00:00.000Z",
    "1": "2003-03-01T05:00:00.000Z",
    "2": "2003-04-01T05:00:00.000Z"
}

我想知道发生了什么事。keys当我使用and时，我也得到相同的结果（与附加到末尾的初始数组长度相同的数字列表）values。

非常感谢您的帮助。

编辑：

有一个issue标记为console.log(domain)。上面写着：

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting …

我正在用 jest 编写单元测试，我必须测试一个从 3rd 方库调用构造函数的函数（测试的目标是检查调用是否使用了正确的参数

第三个 patry 库是 Popper.js

我做了一个jest.spyOn(Popper.prototype, 'constructor').mockImplementation( () => {})但它抛出来自构造函数内部的错误（因此它不是被调用的模拟函数）

这是我的测试代码

  import Popper from 'popper.js';

  it('should call Popper constructor with correct argument', () => {
    // Arrange
    jest.mockImplementation(Popper.prototype, 'constructor', () => {});
    const refElem = document.createElement('div');
    const popElem = document.createElement('div');
    const placement = 'top';
    const container = document.createElement('div');

    // Act
    popup.create(refElem, popElem, placement, container);

    // Assert
    expect(Popper.prototype.constructor).toHaveBeenCalled();

  }); 

在带有数据表和 bootstrap4 的新管理页面中，我们为每一行实现了一个 poper。它在大多数情况下都能完美运行。当我们滚动或调整窗口大小时，弹出窗口会移动到左上角并停留在那里。

我已经尝试了所有可能的配置，例如删除按钮的所有可能的配置和内部组件。

<a data-id="' + data + '" data-toggle="popper"
       data-title="Are you sure?" data-content="This will not be visible on website!">
 <i title="Disable Item" data-toggle="tooltip" class="nav-icon i-Power-2 rounded-circle"></i>
</a>

我使用数据表的 fnDrawCallback 来初始化 popper。

fnDrawCallback: function(){
    $('[data-toggle="popper"]').popover({
        container: "body",
    });
}

当 popper 位于正确位置时的 HTML 代码

fnDrawCallback: function(){
    $('[data-toggle="popper"]').popover({
        container: "body",
    });
}

跳转到左上角后的HTML

<div 
    class="popover fade show bs-popover-left" 
    role="tooltip" 
    id="popover230546" 
    x-placement="left" 
    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(880px, 556px, 0px);">

    <div class="arrow" style="top: 28px;"></div>
    <h3 class="popover-header">Are …