首页 \ 问答 \ select2 4.0和bootstrap工具提示(select2 4.0 and bootstrap tooltip)

select2 4.0和bootstrap工具提示(select2 4.0 and bootstrap tooltip)

有人得到select2 4.0使用bootstrap 3.x工具提示吗? 我再也无法在select2 4.0中显示工具提示(在3.5.2中运行良好)。 这是HTML代码:

<select name="xxx" class="select-full tip" title="some_title">

这是javascript:

$('.tip').tooltip({placement: "auto", html: true});
$(".select-full").select2({
    width: "100%",
});

但是,select2元素中不显示工具提示(在“正常”选择中正常工作)。 我在这个网站上找到了一些解决方案,但它们只适用于旧的select2。

在检查过去3天的代码后,我发现问题很可能是由select2附带的CSS文件中的这一行引起的:

.select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

如果我删除这一行,工具提示工作正常,但select2元素看起来不太好(显示两个选择而不是一个)。

我也找到了部分解决方案。 添加这个额外的片段可以解决这个问题,但只有在javascript本身定义title时它才有效(如果从JS代码中删除了“title”元素,则无效):

$(".select2-container").tooltip({
title: "some static title"});

添加了实例 - https://jsfiddle.net/8odneso7/


Did someone get select2 4.0 working with bootstrap 3.x tooltips? I can't display tooltips in select2 4.0 anymore (worked well in 3.5.2). This is HTML code:

<select name="xxx" class="select-full tip" title="some_title">

Here's the javascript:

$('.tip').tooltip({placement: "auto", html: true});
$(".select-full").select2({
    width: "100%",
});

However, no tooltips are displayed in select2 elements (work fine in "normal" selects). I found some solutions on this website, but they only work with old select2.

After examining the code for last 3 days, I found the problem is most likely caused by this line in CSS file that comes with select2:

.select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

If I remove this single line, tooltips work fine, but select2 elements don't look well (two selects are displayed instead of one).

I also found a partial solution. Adding this extra snippet does the trick, but it only works if title is defined in javascript itself (doesn't work if "title" element is removed from JS code):

$(".select2-container").tooltip({
title: "some static title"});

Live example added - https://jsfiddle.net/8odneso7/


原文:https://stackoverflow.com/questions/31941432
更新时间:2023-10-28 06:10

最满意答案

如果要存储对数组元素的引用,请使用unwrap observable:

var myViewModel = function() {
    this.arr1 = ko.observableArray([]);
    this.arr2 = ko.observableArray(this.arr1());
}

如果想克隆数组使用数组的Slice函数:

var myViewModel = function() {
    this.arr1 = ko.observableArray([]);
    this.arr2 = ko.observableArray(this.arr1.slice(0)); 
}

If you want to store reference to array's elements use should unwrap observable:

var myViewModel = function() {
    this.arr1 = ko.observableArray([]);
    this.arr2 = ko.observableArray(this.arr1());
}

If want clone array use Slice function of array:

var myViewModel = function() {
    this.arr1 = ko.observableArray([]);
    this.arr2 = ko.observableArray(this.arr1.slice(0)); 
}

相关问答

更多
  • 你可以使用这个computed观察值: self.computedData = ko.computed(function() { return ko.utils.arrayMap(self.data(), function(item) { return { dataItem: item.name() + ' ' + item.id() }; }); }); 这里是工作示例: http : //jsfiddle.net/vyshniakov/3fesA/1/ 阅读文档中有关计 ...
  • 正如@ haim770直觉的那样,整个问题(在找出对象/数组问题之后)来自第二个循环内的上下文语法。 非常感谢您使用JavaScript来结束错误,使其脱离主题......顺便说一下,这个最终代码有效(请参阅有关REST客户端):

    问题可能是因为您的event对象本身没有可观察的属性。 尝试将事件定义更改为以下内容: { event_type: ko.observable("accession"), foundation: ko.observable("Found") } 您可能需要进行一些其他更改以解释这些属性现在可以观察到的事实,但这意味着从一个位置对对象所做的更改将反映在其他位置。 The problem is probably because your event objects do not have ob ...
  • 如果页面上有多个viewmodel,则需要在applyBindings调用中指定每个viewmodel应用于页面的哪一部分。 我通过将服务和预留部分包装到单独的容器中,然后在applyBindings调用中指定它们来修复你的小提琴: http : //jsfiddle.net/zsg6b/1/ When you have more than one viewmodel on a page, you need to specify in your applyBindings call which part o ...
  • 将cakeoutjs与cakephp一起使用没有任何问题。 Knockoutjs被设计为后端不可知,这意味着您可以将它与任何服务器端技术一起使用,它也不会假设您与服务器通信的方式。 虽然客户端上的视图模型几乎与json对象相同,但是可以将数据绑定到表单及其关联的表单元素,然后可以将其作为普通的html表单提交。 There is nothing wrong with using knockoutjs with cakephp. Knockoutjs is designed to be backend agn ...
  • 如果要存储对数组元素的引用,请使用unwrap observable: var myViewModel = function() { this.arr1 = ko.observableArray([]); this.arr2 = ko.observableArray(this.arr1()); } 如果想克隆数组使用数组的Slice函数: var myViewModel = function() { this.arr1 = ko.observableArray([]); t ...
  • 您的代码违反了淘汰应用程序的基本原则:viewmodel / view separation。 您不应该在viewmodel中包含任何DOM交互或jQuery代码。 (除了jQuery Ajax调用之外,你可以轻松地将它们替换为另一个Ajax库。事实上,除非你使用jQuery UI或其他具有明确jQuery依赖性的工具,否则考虑在一个淘汰应用程序中完全删除jQuery。所有DOM操作都应该无论如何都要通过淘汰赛完成,只是为了方便Ajax jQuery有点太重了。) 如果要在viewmodel中访问值(如搜索 ...
  • 你可以像这样使用ColumnType对象: //column definition function Column(columnName, minLength, maxLength, minValue, maxValue, reg_ex, role, order, defaultValue) { var self = {}; self.name = ko.observable(columnName || 'new column'); self.minLength = ko.obser ...
  • 减少函数很容易,因为单独的建筑视图模型不需要知道任何外部因素来做出决定; 它可以是基于其位置可观察的直接计算。 增加功能比较棘手,因为它取决于集合中所有其他建筑物的状态。 这是避免子类必须知道父类的一个选项。 在每个建筑物上放置一个canIncrease observable,但让父视图模型处理实际的增加/减少,以便它可以遍历所有子项并在更改位置时更新它们的observable。 var Building = function(location) { var self = this; self. ...
  • var ProductViewModel = function() { var self = this; self.ProductList = ko.observableArray([]); self.ProductTypeList = ko.observableArray([]); //...init 2 array and some misc methods self.getProductTypeName = function (productTypeId) { var ...

相关文章

更多

最新问答

更多
  • 如何使用自由职业者帐户登录我的php网站?(How can I login into my php website using freelancer account? [closed])
  • 如何打破按钮上的生命周期循环(How to break do-while loop on button)
  • C#使用EF访问MVC上的部分类的自定义属性(C# access custom attributes of a partial class on MVC with EF)
  • 如何获得facebook app的publish_stream权限?(How to get publish_stream permissions for facebook app?)
  • 如何并排放置两个元件?(How to position two elements side by side?)
  • 在MySQL和/或多列中使用多个表用于Rails应用程序(Using multiple tables in MySQL and/or multiple columns for a Rails application)
  • 如何隐藏谷歌地图上的登录按钮?(How to hide the Sign in button from Google maps?)
  • Mysql左连接旋转90°表(Mysql Left join rotate 90° table)
  • 带有ImageMagick和许多图像的GIF动画(GIF animation with ImageMagick and many images)
  • 电脑高中毕业学习去哪里培训
  • 电脑系统专业就业状况如何啊?
  • IEnumerable linq表达式(IEnumerable linq expressions)
  • 如何在Spring测试中连接依赖关系(How to wire dependencies in Spring tests)
  • Solr可以在没有Lucene的情况下运行吗?(Can Solr run without Lucene?)
  • 如何保证Task在当前线程上同步运行?(How to guarantee that a Task runs synchronously on the current thread?)
  • 在保持每列的类的同时向数据框添加行(Adding row to data frame while maintaining the class of each column)
  • 的?(The ? marks in emacs/haskell and ghc mode)
  • 一个线程可以调用SuspendThread传递自己的线程ID吗?(Can a thread call SuspendThread passing its own thread ID?)
  • 延迟socket.io响应,并“警告 - websocket连接无效”(Delayed socket.io response, and “warn - websocket connection invalid”)
  • 悬停时的图像转换(Image transition on hover)
  • IIS 7.5仅显示homecontroller(IIS 7.5 only shows homecontroller)
  • 没有JavaScript的复选框“关闭”值(Checkbox 'off' value without JavaScript)
  • java分布式框架有哪些
  • Python:填写表单并点击按钮确认[关闭](Python: fill out a form and confirm with a button click [closed])
  • PHP将文件链接到根文件目录(PHP Linking Files to Root File Directory)
  • 我如何删除ListView中的项目?(How I can remove a item in my ListView?)
  • 您是否必须为TFS(云)中的每个BUG创建一个TASK以跟踪时间?(Do you have to create a TASK for every BUG in TFS (Cloud) to track time?)
  • typoscript TMENU ATagParams小写(typoscript TMENU ATagParams lowercase)
  • 武陟会计培训类的学校哪个好点?
  • 从链接中删除文本修饰(Remove text decoration from links)