Question

如何在jquery中获取/设置引导工具提示的title属性。

<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?我的最终目的是因为我的标题没有空格而且可能很长我需要在逗号上附加一个非空白空间（Unicode中的char U + 2008，或＆amp;＃ 8203）（我已注释掉的那条线）。实际上标题是在VB.NET代码隐藏中设置的，是一个asp.net Label控件，它被渲染为span标签，如果我在VB.NET代码中替换一个有趣的角色（至少在IE）在前端。所以我决定在jQuery客户端做这个，但其他人建议但是我的title属性是空白的（注意：第一个警报框调用显示＆＃34的值;工具提示＆＃34;第二个是空白之间的空白方括号）！

例如说我的工具提示是一个水果清单＆＃34;苹果，香蕉，樱桃，日期＆＃34;我的最大宽度是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

如果您的目标仅仅是转换空白区域，那么一招就是将它们（服务器端）转换为 

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

Answer 3

像往常一样，如果你搜索得足够多，你会找到你想要的东西。感谢@ yann-chabot changing the title of a popover with bootstrap and jquery，我发现这个有用的网站都是关于单码空间字符的https://www.cs.tut.fi/~jkorpela/chars/spaces.html。

解决方案是使用＆＃39; data-original-title＆＃39;属性，而不是标题＆＃39;如下：

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

我决定使用Unicode 200A作为空间角色，因为它给了我更少的空间！我相信这与你正在使用的字体有关，它在我的情况下给了我大约1个像素的空格后的逗号，足以用于＆＃34;自动换行：break-word＆＃34;工作 - 很高兴！

使用jquery访问bootstrap tooltip title属性

3 个答案: