标签: popover

问题是当我在模态之外使用 popover 时，它会按预期运行，当您向下滚动时，popover 它会粘在触发 popover 的元素上。

但是当我在模态中使用它时，问题从那里开始，它没有坚持触发弹出窗口的元素。我正在使用此代码初始化 popover。请参考这个演示。

    $('#popover1').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });

我正在尝试将一个指向 url 的链接放入一个 R 闪亮应用程序content的bs_embed_popover函数变量中 文档说

content: 字符，popover body的内容，可以是HTML

但是，我看到该标签在闪亮的应用程序中显示为普通字符 我缺少什么吗？

library(shiny)
library(bsplus)
library(htmltools)
library(shinydashboard)

# UI
ui <-   
  dashboardPage(
    dashboardHeader(title = "Titles"),
    dashboardSidebar(
      use_bs_popover(),
      selectInput(
        inputId = "letter",
        label = "Label with popover help",
        choices = c("a", "b", "c")
      ) %>%
        shinyInput_label_embed(
          shiny_iconlink() %>%
            bs_embed_popover(
              title = "Letter", content = paste0("Choose a favorite","<a href='www.google.com'>  Test link </a>")
              , placement ="right"
            )
        )
    ),
    dashboardBody(
      tags$style(HTML('.popover-title {color:black;}
                      .popover-content {color:black;}
                      .main-sidebar {z-index:1;}')
    )

  ))

# Server …

我正在尝试在 angular7 中使用 jquery 实现 bootstrap4 popover。我在 index.html 中包含了“popper.js”，也使用 npm 包含了。但它不起作用。

未捕获的类型错误：jquery__WEBPACK_IMPORTED_MODULE_2__(...).popover 不是函数

此错误仅出现在控制台中。

HTML:(sample.component.html)

<button id="option2" autocomplete="off" data-toggle="popover"> Public</button>

Jquery: (sample.component.ts)

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  constructor() { }   
  ngOnInit() {   
    $(document).ready(function(){   
      $('[data-toggle="popover"]').popover();     
      $('#option2').popover({
         html: true,
        content: function() {
          return $("#div").html();
        },
         placement: 'bottom'
      });            
    });
  }

如何在 angular 7 中实现 bootstrap popover？

我是反应的新手。在这里，我使用了一个名为 的库reactstrap，其中，

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Popover Title</PopoverHeader>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover> …

我希望我能像图片中看到的那样做这样的事情。

我正在尝试使用这段代码，但我不太明白如何修复它。

我希望我可以Button在ImageMac应该是图像的a或 an上使用它。

谁能帮我吗？

代码：

func showLittlePopoverWithMessage(sender: NSView, message: String) {
        let controller = NSViewController()
        controller.view = NSView(frame: CGRect(x: CGFloat(100), y: CGFloat(50), width: CGFloat(100), height: CGFloat(50)))

        let popover = NSPopover()
        popover.contentViewController = controller
        popover.contentSize = controller.view.frame.size

        popover.behavior = .transient
        popover.animates = true

        let invisibleWindow = NSWindow(contentRect: NSMakeRect(0, 0, 20, 5), styleMask: .borderless, backing: .buffered, defer: false)
        invisibleWindow.backgroundColor = .red
        invisibleWindow.alphaValue = 0

        //controller.view.addSubview(sender)
        popover.show(relativeTo: sender.bounds, of: sender as! NSView, preferredEdge: .maxY)
    }

#if os(macOS)
struct …

我在 MenuItem（也从 MaterialUI 导入）内有一个 Popover（从 MaterialUI 导入）。我将弹出框的 open 属性设置为anchorEl 的布尔值。onClose 是处理anchorEl 的，如果我在弹出窗口之外单击，它应该将anchorEl 设置为null。然而，情况并非如此。一旦给了 DOMelement 的值，an​​chorEl 就永远不会被设置为 null，而且我不确定我在这里做错了什么。

这是我的代码中对于这个问题很重要的部分

    //state for the anchorEl (also handles the open/close for the popover)
    const [usernamePopoverAnchorEl, setUsernamePopoverAnchorEl] = React.useState<null | HTMLElement>(null);
    
    //handle popover open/close
    const handleUsernamePopoverClick = (e: any) => {
        setUsernamePopoverAnchorEl(e.currentTarget);
    }

    const usernamePopoverOpen = Boolean(usernamePopoverAnchorEl);

    const popoverHandleClose = () => {
        setUsernamePopoverAnchorEl(null);
        console.log(usernamePopoverAnchorEl);
    }
    
    //menuItems with the popovers that don't close
    <MenuItem onClick={handleUsernamePopoverClick}>
        <span>
            <p>Change username</p>
        </span>
        <Popover open={usernamePopoverOpen} anchorEl={usernamePopoverAnchorEl} onClose={popoverHandleClose}>
            <p>Testing helloooo!</p> …

我有一些弹出窗口,我想触发'悬停'raphael.js图形的某些元素,但我似乎无法让它们工作(使用jQuery UI和Bootstrap).

我通过引用指定的类在网站上调用popovers:

$(document).ready(function() {
  $('.show-popover').popover();
});

:然后我就可以通过添加相关属性的HTML标签触发popovers class="show-popover",rel="popover",data-trigger="hover",等.

我在网站上也有一些嵌入式raphael.js SVG图形.在我添加了上面提到的相同属性之后,我似乎无法在raphael.js图形的元素(路径,文本等)上显示弹出窗口.

假设我在图形中添加了一个方块; 然后,我可以将所需的popover属性添加到raphael.js中的方块,如下所示:

square.node.setAttribute('class', 'show-popover');
square.node.setAttribute('rel', 'popover');
square.node.setAttribute('data-trigger', 'hover');
square.node.setAttribute('data-original-title', 'Popover title');
square.node.setAttribute('data-content', 'Main popover text here...');

我可以看到使用Firebug将属性添加到SVG中,但是悬停时不会出现弹出窗口.

是否有可能触发弹出窗口悬停在raphael.js图形的元素上？

[编辑]参见示例http://jsfiddle.net/cQGQT/

我正在开发一个应用程序,让用户从他自己的相册中选择图像.它适用于iPhone,但不适用于iPad.

我做了一个UIPopoverController,一切正常,用户可以选择一张照片,但是当用户按下"USE"按钮时.该应用程序兑换了一个说

UIPopoverController dealloc]到达时,popover仍然可见

这是代码:

- (void)choosePhotoFromLibraryipad:(id)sender{


    if(![popoverController isPopoverVisible]){


    imagePicker = [[UIImagePickerController alloc] init];
    imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    imagePicker.delegate = self;
    imagePicker.allowsEditing = YES;

    self.popoverController = [[UIPopoverController alloc] initWithContentViewController:imagePicker];

    [self.popoverController presentPopoverFromRect:CGRectMake(0.0, 0.0, 400.0, 400.0)
    inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES ];

    }
}

我在 iOS Swift 上使用了 popoverPresentationController 并且在弹出窗口中放入了图像和文本？

我遇到的问题是内容对于弹出框来说太大了？可以设置尺寸吗？

图片下方是我遇到的问题以及试用代码和错误消息？

  let myAlert = UIAlertController(title: "\n\n\n\n\n\n", message: "Correct answer selected, move on to next level", preferredStyle: UIAlertControllerStyle.actionSheet)

    let okAction = UIAlertAction(title: "Ok", style: UIAlertActionStyle.default)
    {
        //  action in self.dismiss(animated: true, completion: nil)

        action in self.performSegue(withIdentifier: "goSegue1", sender: self)

        self.musicEffect.stop()
    }
    // put image into action sheet
    let imageView = UIImageView(frame: CGRect(x: 70, y: -30, width: 140, height: 140))
    imageView.image = #imageLiteral(resourceName: "wellDone2.png")

    myAlert.addAction(okAction);
    myAlert.view.addSubview(imageView)

    // display the alert messgae

    myAlert.popoverPresentationController?.sourceView = view
    myAlert.popoverPresentationController?.sourceRect …

假设，我有很多 div。现在我想显示单独的弹出窗口，div 明智的。我用鼠标悬停。运作良好。但第一次不工作。当我第二次移动鼠标时，它就可以工作了。

这是我的代码：

$(document).ready(function() {
  $(".popper").one('mousemove', function() {
    var messageId = this.id;
    console.log(messageId);
    $("#" + messageId).popover({
      placement: 'bottom',
      container: 'body',
      html: true,
      content: function() {
        return $('.popper-content-' + messageId).html();
      }
    });
  });
});

body {
  padding: 10px 120px;
}

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn …

我正在尝试使用离子v3弹出窗口。我也实现了相同的功能。我有一个疑问，是否像ionic v1一样在ionic 3中有弹出箭头。如果是，则是什么特定的html标签。我们在ionic 1中有，但在ionic v3中不支持。我没找到。