我无法使用jQuery更改工具提示引导位置

我无法使用jQuery更改工具提示引导位置。例如http://jsfiddle.net/2cast8g8/
如果我在text1中输入一个更大的值，我的函数ck（）需要改变工具提示的位置。我无法使用jQuery更改工具提示引导位置

此外，它可以改变红色与jQuery的工具提示的颜色？

<input type="text" id="text1" name="title" value="" data-toggle="tooltip" data-placement="top"title="this need to be less"> 
<input type="text" id="text2" name="title" value="" data-toggle="tooltip" data-placement="bottom"title="bigger ">

$('#text1').change(function() { 
    ck() 
}); 
$('#text2').change(function() { 
    ck() 
}); 

function ck() { 
    text1 = document.getElementById("text1").value; 
    text2 = document.getElementById("text2").value; 
    if (Number(text1) > Number(text2)) { 
     $("#text2").attr("data-original-title", "This value need to be bigger than "); 
     $("#text1").attr("data-placement", "top"); 
     $(function() { 
      $('#text2').tooltip('hide').tooltip('show'); 
     }); 
    } else { 
     $("#text2").attr("data-original-title", "bigger"); 
    } 
} 
$(function() { 
    $('[data-toggle="tooltip"]').tooltip('show') 
})

来源

2015-04-02 user3944364

$('body').tooltip({ 
    placement: function(tip, element) { 
     //code to calculate the position here, return values: "left", "right", "top", "bottom" 
    }, 
    selector: '[data-toggle="tooltip"]' 
});

来源

2015-04-02 21:12:47

我不知道如何使用代码。 – user3944364 2015-04-02 21:36:25

如果我正确地理解了这个问题，他想修改/定制工具提示的确切位置（向左或向右移动它）。上述功能只能返回其中一个内置位置。 – 2015-04-02 21:39:08

引导程序工具提示插件有一个“放置”选项，其控制一般位置（顶部，底部，左，右）的工具提示的，但它算出准确的在这个函数中的位置：

Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) { 
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width/2 - actualWidth/2 } : 
     placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width/2 - actualWidth/2 } : 
     placement == 'left' ? { top: pos.top + pos.height/2 - actualHeight/2, left: pos.left - actualWidth } : 
    /* placement == 'right' */ { top: pos.top + pos.height/2 - actualHeight/2, left: pos.left + pos.width } 
}

你可以重载这个函数来提供你自己的逻辑（也许通过添加一个'自定义'展示位置类型。请注意，插件除了设置css位置属性外，还将位置类型作为类应用于元素。这些类在setContent函数中被删除，因此您必须调整该函数以删除新的自定义布局类型类。您可能还需要考虑其他问题/考虑事项 - 这不是一个简单的选择。但这将是一个有趣的项目，甚至可能值得拉请求:)

另一种方法是在引导插件完成后简单地移动/覆盖位置。有一个“显示”事件可用，但它只在应用了css转换后触发，因此可能不适合。

一个例子可能是这样的（未测试的代码）：

$('#text2').on('shown.bs.tooltip', function() { 
    var left = $(this).css('left'); 
    $(this).css({ 
    left: left + 50 
    }); 
})

你可能想看看jQueryUI的工具提示部件 - 它具有用于定位的工具提示更多的功能（包括添加自定义的偏移量）。 http://api.jqueryui.com/tooltip/#option-position

来源

2015-04-02 21:37:55

.tooltip.top .tooltip-inner {background-color：＃f00;}我想使用这个CSS。 $（“＃text1”）。attr（“data-placement”，“top”）;如果数据文本框不正确，我将工具提示从底部切换到顶部，以使工具提示变为红色。 – user3944364 2015-04-02 22:49:11

我不确定这里的问题到底是什么。您应该能够将颜色更改逻辑放入显示的事件中。 – 2015-04-03 16:49:27

我想更改位置，因为如果用户出错，我无法将颜色更改为红色。所以我添加到CSS：.tooltip.top .tooltip-inner {background-color：＃f00;}如果没有错误，我保留的用户数据保持在工具提示底部。什么时候出错我想使用内置位置顶部，因为在我的CSS是红色的。我不能用jQuery改变红色的工具提示颜色。 – user3944364 2015-04-03 22:16:08

我无法使用jQuery更改工具提示引导位置

回答

相关问题