弹出框可编辑工具提示

Posted 2023-02-19

【中文标题】弹出框可编辑工具提示

【英文标题】：Popover editable for tooltip

【发布时间】：2017-02-08 12:57:06

【问题描述】：

我是 Angular js 和引导程序的新手。我有一个要求，我需要在悬停或单击时实现弹出框，并且用户应该能够编辑工具提示。你能建议一种实现它的方法吗？

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data- content="Some content">Hover over me</a>

我也愿意接受任何其他方法。

【参考方案1】：

检查angular-ui-bootstrap - 项目，特别是popover指令：

https://angular-ui.github.io/bootstrap/#/popover

您需要将 angular-ui-bootstrap 脚本以及常规引导 css 添加到 index.html - 有一个 CDN：

https://cdnjs.com/libraries/angular-ui-bootstrap#

在将上述 2 个脚本（最小或未缩小）和 bootstrap.css 文件添加到 index.html 之后 - 您必须将 angular-ui-bootstrap 添加到您的应用程序引导过程中，例如：

angular.module('myModule', ['ui.bootstrap']);

此时您已准备好使用弹出框 - 例如在 mouseenter 上：

  <button uib-popover="This popover appeared on mouse enter!" 
          popover-trigger="'mouseenter'" 
          type="button" 
          class="btn btn-default">Hover Over</button>

您显然可以根据您的要求进行动态处理，就像文档中的示例一样：

    <div class="form-group" ng-controller="MyController as vm">
      <label>Popup Text:</label>
      <input type="text" 
             ng-model="vm.popoverContent" 
             class="form-control"/>

      <button uib-popover="vm.popoverContent" 
          popover-trigger="'mouseenter'" 
          type="button" 
          class="btn btn-default">Dynamic Hover Over</button>
    </div>