【问题标题】:Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?Bootstrap 3 - 如何使用 javascript/jquery 更改显示为工具提示的超链接标题文本?
【发布时间】:2014-04-29 13:05:33
【问题描述】:

单击链接时,我正在尝试使用 javascript/jquery 更改超链接标题。 HTML

<a 
        href="javascript:addRss('234');" 
        class="btn btn-success" 
        title="Add content to Personal RSS" 
        id="addRssbtn" 
        data-toggle="tooltip" >
            <i class="fa fa-rss fa-lg"></i> 
        </a>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");

JAVASCRIPT

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


function addRss(hash){
        $("#addRssbtn").attr("class", "btn btn-success active");
        $("#addRssbtn").attr("title", "Remove content from Personal RSS");
        $("#addRssbtn").attr("href", "javascript:unaddRss(" + hash + ");");

//some other post data stuff
};

只有当我不使用时,标题才会更改并显示

data-toggle="tooltip"

那么我怎样才能使 data-toggle="tooltip" 在单击链接时将新更改的标题显示为工具提示?

http://jsfiddle.net/h5kKa/

除了我的电脑上的新工具提示之外,上面的代码正在工作,但在 jsfiddle 上却没有。

【问题讨论】:

    标签: javascript jquery html css twitter-bootstrap


    【解决方案1】:

    使用fixTitle 选项更新工具提示。

    $("#addRssbtn").attr("title", "Remove content from Personal RSS")
    

    变成

    $("#addRssbtn").attr("title", "Remove content from Personal RSS").tooltip('fixTitle');
    

    您可以添加.tooltip('show'); 以在之后立即显示工具提示:

    $("#addRssbtn").attr("title", "Remove content from Personal RSS").tooltip('fixTitle').tooltip('show');
    

    http://jsfiddle.net/h5kKa/2/

    【讨论】:

      【解决方案2】:

      你不是在寻找这样的东西吗?

      $("#addRssbtn").tooltip("option", "content", "title");
      

      Here is a jfiddle for it

      E:刚刚被打败

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-04-27
        • 2011-10-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多