标签: tippyjs

我有以下提示，悬停时 Ajax 调用会去获取数据，创建内容并显示它。但它不适用于动态内容，因为在页面加载

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

在页面上是静态的，但在选项卡中也是动态的。

所以下面的代码适用于静态

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

但不适用于动态。

<div id="template" style="display: none;">
    Loading a new image...
</div>

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

提示 jquery ：

const template = document.querySelector('#template');
const initialText = template.textContent;

const tip = tippy('.otherPostTags', {
    animation: 'shift-toward',
    arrow: true,
    html: '#template',
    onShow() {
        const content = this.querySelector('.tippy-content')
        if (tip.loading || content.innerHTML !== initialText) return
        tip.loading = true
        node = document.querySelectorAll('[data-tippy]');
        let id = node[0].dataset.postid;
        $.ajax({
            url: '/get/post/'+id+'/tags',
            type: 'GET',
            success: function(res){
                let …

我正在使用Tippy.js。我想在 mouseenter 上显示工具提示，但在单击时隐藏它。

当您单击一个元素时，这会触发工具提示.tippy并保持打开状态，直到您单击离开。

tippy('.tippy', { trigger: 'click' });

这说明，当你一个提示的mouseenter与元素.tippy和皮革当鼠标离开.tippy元素。

tippy('.tippy', { trigger: 'mouseenter' });

我想要两者的结合。在 mouseenter 上显示工具提示，但让它保持打开状态，直到我点击离开。

我更喜欢**不听点击事件和鼠标输入事件，并在使用时手动显示和隐藏它 { trigger: 'manual' }

另外，能否请您解释一下{custom}触发选项。从文档：

{custom} 指的是您可以拥有任何事件侦听器，但它不会具有相反的“隐藏”事件。

我可以使用{custom}触发器来满足我的需求吗？如何？

非常感谢！

我有以下代码,显示包含动态数据的工具提示.它的工作正常,但它显示了所有人的相同工具提示.

我用过的tip._tippy.destroy();位没用过.

<div id="template" style="display: none;">
    Loading a tooltip...
</div>

上面显示工具提示的元素:

<span class="more-tags otherPostTags" data-postId="{{$post->id}}">...</span>

JS:

const template = document.querySelector('#template')
const initialText = template.textContent
const tip = tippy('.otherPostTags', {
    animation: 'shift-toward',
    arrow: true,
    html: '#template',
    onShow() {
        const content = this.querySelector('.tippy-content')
        if (tip.loading || content.innerHTML !== initialText) return
        tip.loading = true
        node = document.querySelectorAll('[data-tippy]');
        let id = node[0].dataset.postid;
        $.ajax({
            url: '/get/post/'+id+'/tags',
            type: 'GET',
            success: function(res){
                let preparedMarkup = '';
                res.tags.map(function(item) {
                    preparedMarkup +=
                        '<span class="orange-tag" style="background-color: '+item.color+'">'+
                            item.name …

我的浏览器使用tippy.js，直到今天早上它们都工作正常。突然间，它们不会响应任何 CSS 样式，而只是恢复为带有边框半径的默认深灰色背景。不过，它们会对脚本中的更改做出响应，例如让它们跟随光标。这是脚本，我尝试重新安装很多脚本，但我不知道发生了什么。

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<script>
tippy('[title]', {
    theme: 'custom',
    arrow: false,
    followCursor: true,
    
    content(reference) {
      const title = reference.getAttribute('title');
      reference.removeAttribute('title');
      return title;
    },
});
</script>

这是 CSS，那些不起作用的东西。

.tippy-tooltip.custom-theme {
  background-color: #f7f7f7;
  color: black;
  border:1px solid #ededed;
  border-radius:0;
}

我有一个包含以下代码的指令

import { Directive, Input, OnInit, ElementRef, SimpleChanges, OnChanges } from '@angular/core';
import tippy from 'tippy.js';

@Directive({
  selector: '[tippy]'
})
export class TippyDirective implements OnInit, OnChanges {

  @Input('tippyOptions') public tippyOptions: Object;

  private el: any;
  private tippy: any = null;
  private popper: any = null;

  constructor(el: ElementRef) {
    this.el = el;
  }

  public ngOnInit() {
    this.loadTippy();
  }

  public ngOnChanges(changes: SimpleChanges) {
    if (changes.tippyOptions) {
      this.tippyOptions = changes.tippyOptions.currentValue;
      this.loadTippy();
    }
  }

  public tippyClose() {
    this.loadTippy();
  }

  private loadTippy() {
    setTimeout(() => { …

我正在使用 Laravel Mix，它使用 Webpack 3.6，我正在尝试安装https://atomiks.github.io/tippyjs/。

我的 SCSS 可能通过@import "../../../../node_modules/tippy.js/dist/tippy.css";.

但是，在我的 javascript 文件的顶部，我有这个，但它不起作用：

var $ = require('jquery');
var webcast_helper = require('webcast_helper');
var moment = require('moment');
import tippy from 'tippy.js';

我得到错误： Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

如何以与此 Webpack 方法配合使用的方式导入 Tippy.js？

_{（如何使用 webpack 4 将 tippy.js 导入到 html 页面？显然对我不起作用。）}

我想要每个都有关闭按钮，tooltip我怎样才能拥有呢？

注意：我不想搞乱设计，这就是为什么没有尝试太多，我在这里寻找的最佳解决方案

下面是演示：

tippy('#t1,#t2,#t3,#t4',{
        content: "Error Message",
        delay: 100,
        arrow: true,
        arrowType: 'round',
        size: 'large',
        duration: 500,
        animation: 'scale',
        trigger:'manual',
        placement:'bottom',
        hideOnClick:false,
 });

var settings = [{id:"#t1",pos:"top"},{id:"#t2",pos:"bottom"}, 
                {id:"#t3",pos:"left"},{id:"#t4",pos:"right"}];

settings.forEach(function(sett){
    var tip = document.querySelector(sett.id);
    tippy(tip);
    tip._tippy.set({content:"click x",placement:sett.pos});
   tip._tippy.show();
});

div.tippy-dummy{
    position: relative;
    width: 220px;
    height: 30px;
    background: #333;
    color: #fff;
}

div.tippy-dummy span{
    position: absolute;
    display: inline-block;
    background: #715a5a;
    right: 0;
    top: 0;
}

.tooltip{
      display:flex;
      justify-content:space-between;
      width: 90%;
}
.btn{
	  width: 90px;
      height: 30px;
	  border: 2px solid …

我已经安装了tippy.js 来处理我的工具提示，但是我正在努力让工具提示显示数据属性中设置的内容。我的默认工具提示工作正常，但是当我通过类初始化时，为了能够向工具提示添加不同的样式，它不会从工具提示中获取内容。

tippy.setDefaults({
    animation: 'scale',
    animateFill: false,
    maxWidth: 240,
    duration: 0,
    arrow: false,
})

tippy('.js-tippy-reviews', {
    theme: 'reviews',
    animation: 'scale',
    animateFill: false,
    maxWidth: 240,
    duration: 0,
    arrow: false,
})

如果我将内容方法添加到tippy，它将显示，但是由于工具提示的内容是动态的，我需要在数据属性上设置它。我不确定如何将数据属性从元素传递到tippy。

content: this.dataset.tippy

有什么想法我做错了吗？

HTML：

<div class="js-tippy-reviews reviews-notification" data-tippy="2 Pending Reviews"></div>

我对在 Rails 中使用 Webpack 比较陌生。我正在尝试在 Rails 6 应用程序上安装tippy.js，但在视图中无法访问它。（如果我只是在视图的脚本标签中包含 tippy.js CDN，我可以让它工作，但我无法使用 webpack/yarn 让它工作。）

根据tippy.js说明，我已经用yarn 安装了tippy.js。我的package.json文件：

{
  "//": [
    "moment - used in time_zones",
    "popper.js - needed for bootstrap"
  ],
  "dependencies": {
    "@rails/ujs": "^6.0.3-1",
    "@rails/webpacker": "5.1.1",
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "moment": "^2.26.0",
    "popper.js": "^1.16.1",
    "tippy.js": "^6.2.3",
    "webpack": "^4.43.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  },
  "resolutions": {}
}

然后说明说要导入tippy及其CSS，所以我在app/javascript/packs/application.js：

import "core-js/stable";

require("@rails/ujs").start();
require("jquery");

import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css';
console.log("loaded tippy"); …

参考： https: //atomiks.github.io/tippyjs/

尽管我指定了.z-index，但指定时 z-index 似乎不起作用interactive:true（然后它落后于其他元素）#main_container。我怎样才能把它“放在所有东西的前面” interactive:true？

delegate( '#main_container', {
target: '[data-tippy-content]', allowHTML: true, 
interactive: true, placement: 'right', theme: 'light', zIndex: 99999
} );

另请参阅此处： https: //github.com/projectje/bookmark了解上述代码。我做了一个临时解决方法，在每个第一个字符后面放置一个 BR，这样它就不会流过其他框。但这确实是一个短期的解决方法。

我使用 Tippy.js 作为工具提示。我有几组带有工具提示的图标。美好的。问题：每个组应该根据图标组的容器类以不同的颜色显示工具提示。但工具提示默认在 document.body 中实例化，如果我使用appendTo选项更改父级，例如

appendTo: function(){
   // so tootips should be instantiated inside each icons group's container
   return document.getElementsByClassName('lr-tgi-optional')
}

我收到错误（TypeError：this.options.appendTo.contains 不是函数）。

我尝试编辑 Tippy.js 的 CSS 样式。所以我 npm install tippy 并像这样将它导入我的 html

<script src="/min/tippy.js/umd/index.all.js"></script> 

但是，它有一些错误。

Uncaught TypeError: Popper is not a constructor
    at createPopperInstance (createTippy.ts:677)
    at mount (createTippy.ts:694)
    at Object.show (createTippy.ts:961)
    at new_control.js:128
    at Array.forEach (<anonymous>)
    at createGraph (new_control.js:101)
    at Object.success (new_control.js:6)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)

所以，我试图在我的目录工作文件中 npm install popper 但是，它根本不起作用。我错过了什么？

单击几秒钟后，是否有任何默认方法可以隐藏工具提示？我想在点击时显示它 2 秒然后关闭它。我该怎么做？