使用 jquery 访问 bootstrap 工具提示标题属性

Question

如何在 jquery 中 get/set bootstrap 工具提示的标题属性。

<span data-toggle="tooltip" title="a,b,c,d">Something</span>

...和...

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();

    $('.CustomToolTip').each(function () {
            alert($(this).attr('data-toggle'));
            alert('[' + $(this).attr('title') + ']');
            //$(this).attr('title', $(this).attr('title').replace(/,/g, ',&#8203;'));
    });
});

我试过了：

...
    $('.CustomToolTip').on('show.bs.tooltip', function () ...

...这意味着我使用了不正确的属性或代码!!??!!

参考Why doesn't break word work on a long string with commas?我的最终目的是因为我的标题没有spaces并且可能很长我需要在逗号后面附加一个non-whitespace space（Unicode 中的字符 U+2008，或）（我已注释掉的行）。实际上，标题是在 VB.NET code-behind 中设置的，并且是一个 asp.net 标签控件，它被呈现为 span 标记，如果我在 VB.NET 代码中进行替换front-end 中出现有趣的字符（至少在 IE 中是这样）。所以我决定按照其他人的建议在 jQuery 客户端执行此操作，但是我的 title 属性为空（注意：第一个警告框调用显示 "tooltip" 的值，第二个在方括号之间为空） !

例如假设我的工具提示是一个水果列表 "apple,banana,cherry,date" 而我的 max-width 是 11 个字符的宽度，那么我的工具提示呈现为：

apple,banan
a,cherry,da
te

但是；我不会的是：

apple,
banana,
cherry,date

即它不会在单词中间中断。

我的css是：

.CustomToolTip + .tooltip.right > .tooltip-inner {
    max-width: 400px;
    background-color: #333333;
    color: #bbbbbb;
    word-wrap: break-word;
    border-radius: 8px;
}
.CustomToolTip + .tooltip.right > .tooltip-arrow {
    border-right-color: #333333;
}

谁能帮我指出我的错误 - 谢谢？

Answer 1

获取标题属性

$('[data-toggle="tooltip"]').attr("title");

设置标题属性

$('[data-toggle="tooltip"]').attr( "title", "New Value" );

供参考：http://api.jquery.com/attr/

Answer 2

如果您的目标只是转换白色 space，一个技巧是将它们（服务器端）转换为  

或者实际更改工具提示弹出窗口的 CSS。

Answer 3

像往常一样，如果您足够努力地搜索，就会找到您要找的东西。感谢@yann-chabot changing the title of a popover with bootstrap and jquery and I found this useful site that is all about uni-code space characters as well https://www.cs.tut.fi/~jkorpela/chars/spaces.html.

解决方案是使用 'data-original-title' 属性而不是 'title'，如下所示：

...
var newTitle = $('.CustomToolTip').attr('data-original-title');
newTitle = newTitle.replace(/,/g, ',\u200A');
$('.CustomToolTip').attr('data-original-title', newTitle);

我决定对 space 字符使用 Unicode 200A，因为它给我的 space 更少！！我相信这与您使用的字体有关，在我的例子中，它在逗号后给了我大约 1 个 space 像素，足以让 "word-wrap: break-word" css 工作 -万岁！

使用 jquery 访问 bootstrap 工具提示标题属性

Access bootstrap tooltip title attribute using jquery

vb.net

jquery-plugins

twitter-bootstrap