标签: tether

我正在使用Bootstrap V4,并在控制台中记录以下错误;

错误:Bootstrap工具提示需要Tether(http://github.hubspot.com/tether/)

我试图通过安装Tether删除错误,但它没有奏效.我通过包含以下代码行'安装'Tether;

<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>

我是否正确安装了系绳？

任何人都可以帮我删除此错误？

如果您希望在我的网站上查看错误,请单击此处并加载您的控制台.

Bootstrap的最新测试版(v4)使用Tether js来定位元素,我无法让它在我的Requirejs应用程序中运行.

在我的requirejs配置中,我有以下垫片

paths: {
    jquery: '/path/to/jquery',
    tether: '/path/to/tether'
},
shim: { 
     'bootstrap': ['tether', 'jquery']       
}

当我想在我的应用程序中激活工具提示时,我使用以下代码,我认为是正确的

function page_events() {
    requirejs(['bootstrap'], function(bootstrap) {
        $('[data-toggle="tooltip"]').tooltip(); 
    }); 
}

这应首先加载bootstraps依赖项,然后执行代码.所以通常应该在这段代码之前包含Tether.

但控制台的结果是

未捕获的ReferenceError:未定义系绳

有没有人有同样的问题？

看似相似的问题在这里和这里存在,但提供的答案并没有解决我的情况.

我的服务器上有一个Node/Express/Webpack堆栈,我在其上使用npm来安装Bootstrap 4 alpha 6以及tether.js,这是工具提示功能所必需的依赖项.在我的主JS文件中,如webpack配置中所定义的,我使用以下代码段导入了使用和初始化Bootstrap工具提示函数的tether:

import "tether";

和:

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

然后,在我的index.hbs中(我使用把手来渲染我的页面),我有以下片段实现工具提示:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top">
    Tooltip on top
</button>

脚本编译成功,没有任何错误或警告.但是,在浏览器中加载页面时,我收到错误消息tooltip is not a function....这应该不会发生,对吧？我可以确认JQuery工作得很好,因为如上所示,在一个初始化工具提示下面的下面的代码片段正在渲染而没有任何打嗝:

$('p#some').html('from jquery');

如下所示,JQuery和Tether插件以及Tooltip插件都已在我的webpack.config.js文件中启动:

plugins: [
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new ExtractTextPlugin({ filename: "../../public/dist/main.min.css" }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", …

我正试图在Play商店制作像"蓝牙自动网络共享"这样的应用程序.我在论坛上看到Android非常安全,并且在没有用户交互的情况下不会启用此设置.

我需要一些关于如何启用蓝牙网络共享的解释.

谢谢

首先,我知道这是一个标题.

我最近接管了angular-tooltip,并试图为我的主要工作项目构建一个自定义工具提示.

在我的项目中,我有一个简单的ng-repeat指令

<div class="row-submenu-white" ng-repeat="merge in potentialMerges | limitTo: numPotentialMergesVisible" company-profile-tooltip="merge.preview"></div>

使用库的说明,我定义了一个自定义工具提示指令:

myApp.directive('companyProfileTooltip', ['$tooltip', ($tooltip) => {
    return {
        restrict: 'EA',
        scope: { profile: '@companyProfileTooltip' },
        link: (scope: ng.IScope, elem) => {
            var tooltip = $tooltip({
                target: elem,
                scope: scope,
                templateUrl: "/App/Private/Content/Common/company.profile.html",
                tether: {
                    attachment: 'middle right',
                    targetAttachment: 'middle left',
                    offset: '0 10px'
                }
            });

            $(elem).hover(() => {
               tooltip.open();
           }, () => {
                tooltip.close();
           });
        }
    };
}]);

Company.profile.html简单地说:

<div>Hello, world!</div>

现在,如果你注意到,在ng-repeat中我有一个limitTo过滤器.对于每个(初始3)合并工作完美,在<div>Hello, world!</div>正确添加工具提示的地方. …

我想补充引导4到Aurelia.我只能得到CSS工作,但bootstrap.js需求Tether,我不能把它包括在内,因为我在控制台中不断收到此错误:

Bootstrap tooltips require Tether

我尝试过这个

"jquery",
"Tether",
{
  "name": "tether",
  "path": "../node_modules/tether/dist",
  "main": "js/tether.min",
  "exports": "Tether",
  "resources": [
    "css/tether.css"
  ]
},
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["tether", "jquery"],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
},

它确实捆绑了,但它仍在抱怨失踪Tether.我读了另一个堆栈的答案 ,我必须available globally which could be done via用这个makeTether requirejs.config.js`

define(['lib/tether.min'], function(tether) {
    window.Tether = tether;    
});

但是没有这样的配置Aurelia.

我想根据页面上的用户操作在不同的DOM元素旁边创建并显示一个反馈模式。我能够定位模式，但是每当我尝试添加信息时，它就会开始出现这些错误-Invariant Violation：findComponentRoot“。我的问题是，这是使用库的正确方法，以及如何解决这些错误。这是相同的 http://plnkr.co/edit/alF7JyQAhBwcANyrQQiw

var Feedback = React.createClass({
  clickHandler: function(){
        console.log("form is submitted");
  },
  componentDidMount: function(){
    var el = this.getDOMNode();
    var drop = new Drop({
        target: document.querySelector('#test'),
        classes: 'drop-theme-arrows-bounce drop-hero',
        content: el,
        openOn: "click",
        tetherOptions: {
          attachment: 'bottom right',
          targetOffset: "0 10px"
        }
    });
  },
  render: function(){
    return (
      <div className="drop-theme-hubspot-popovers">
        <form>
          <div className="form-group">
            <label>Feedback</label>
            <input type="text" className="form-control"
                placeholder="Enter email"
                onChange={this.changeHandler}/>
            <a href="#" className="btn btn-default" onClick={this.clickHandler}>Submit</a>
          </div>
        </form>
      </div>
      );
  }  
});

var Demo = React.createClass({
  getInitialState: function(){
    return {feedback: null}; …

有没有办法如何设置我的目标元素将与Tether追加的自定义父元素？

默认情况下,所有tether-elements都附加到body.我将我的下拉元素附加到模态内的输入,由于z-index问题,我需要将此下拉列表附加到模态上,而不是附加在模态上body.Tether有选择吗？

在我的模板中,我有一个div,我想用作各种工具提示.当我选择了一个模型时,工具提示显示,然后我使用系绳将它放在正确的位置.如果我在设置使元素显示的模型后立即设置系绳,则其大小未正确计算且Tether不能正确限制约束.如果我用setTimeout去抖动它,我可以把它放在正确的位置,但这感觉很好.我的问题:

是否存在某种我可以附加的回调机制,在show.bind使元素可见后调用？

我的模板:

<div ref="tooltip" show.bind="selectedAlert" class="homepage-stats-tooltip panel panel-default">
    <div class="panel-body">
        <h1>${selectedAlert.Name}</h1>
        <dl>
            <dt>Normal</dt>
            <dd>${selectedAlert.NormalVolume}</dd>
            <dt>Current</dt>
            <dd>${selectedAlert.CurrentVolume}</dd>
        </dl>
    </div>
</div>

设置模型并调用Tether的函数:

showTip(event, state) {
    if (!state) {
        return;
    }

    console.log(`Show tip for ${state.Name}.`);
    this.selectedAlert = state;

    setTimeout(() => {
        new Tether({
            element: this.tooltip,
            target: event.target,
            attachment: "top left",
            targetAttachment: "top right",
            constraints: [
                {
                    to: this.usMap,
                    pin: true,
                    attachment: 'together'
                }
            ]
        });
    }, 10);
}

谢谢!

我正在按照本教程安装Bootstrap with Yarn这是在rails 5.1上新版Bootstrap 4的命令,他们在这里观看:

yarn add bootstrap@4.0.0-alpha.6

所以我注意到它安装了bootstrap 4 alpha 6,JQuery3和Tether.所以它已经在.gitignore上添加:

/node_modules
/yarn-error.log

并且已经在我的config/initializers/assets.rb中设置了

Rails.application.config.assets.paths << Rails.root.join('node_modules')

我需要穿上我的application.js

//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require_tree .

在我的application.scss中

/*
 *= require bootstrap/dist/css/bootstrap
 *= require_tree .
 *= require_self
 */

我的问题是,有必要将app.js和application.scss放在JQuery和Tether上工作吗？怎么样？

我正在尝试这个:application.js

//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require_tree .

application.scss

/*
 *= require bootstrap/dist/css/bootstrap
 *= require tether/dist/css/tether
 *= require_tree .
 *= require_self
 */ …

我正在开发一个新的网站,我希望在容器div的底部包含一个页脚.

我发现了一个名为Tether的javascript库(http://github.hubspot.com/tether/),但我遇到了实施问题.

下面是我的HTML代码

<html>
    <head>
        <title>Bug Reporting</title>
        <link href="StyleSheet.css" type="text/css" rel="stylesheet" />
        <script src="includes/jquery.js"></script>
        <script src="includes/tether/tether.js"></script>
        <script>
            $(document).ready(function()
            {
                new Tether({
                    element: '.footer',
                    target: '.container',
                    attachment: 'top left',
                    targetAttachment: 'bottom left'
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <header>
                This is the body
            </header>

            <div id="content">
                This is the content<br />
            </div>

            <div class="footer1">
                This is the footer
            </div>
        </div>
    </body>
</html>

下面是我的StyleSheet

html, body
{
    font-family: arial;
    margin: 0;
    padding: 0;
}

header
{
    background-color: red;
    width: …

我正在尝试在使用 Angular CLI 构建的 Angular 应用程序中使用 Bootstrap4 工具提示。

Bootstrap4 alpha 文档说我需要运行此命令才能启用工具提示：

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

所以，我在 app.component.ts 中添加了一个 ngAfterViewInit() 函数来做到这一点：

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

在应用程序 html 文件中使用这个：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Hi there!">
    Tooltip Test
</button>

将鼠标悬停在按钮上时，我确实看到了一个工具提示，但这只是一个普通的浏览器工具提示，而不是 Bootstrap4 工具提示。

在运行时，我收到错误：

ERROR ReferenceError: $ is not defined

将此行添加到组件无济于事。

declare var $: any;

我已经仔细检查了 jquery、tether 和 boostrap js 文件是否按该顺序包含在项目 angular-cli.json 文件的脚本部分中。

有什么建议我可以让它发挥作用吗？

谢谢！

我正在使用Angular CLI开发一个项目.所以我安装了tether npm install tether --save,并使用在app.component.ts中导入了dependdency import * as Tether from 'tether'.

当我尝试初始化Tether时,new Tether({ ... })它在控制台中输出以下错误:

EXCEPTION:WEBPACK_IMPORTED_MODULE_4_tether不是构造函数

如果我用console.log(Tether)它打印Tether变量给我看似空的对象.

你们能帮助我吗？我之前从未使用过打字稿和webpack,所以如果我在这里遗漏了一些明显的东西,我很抱歉.