jQuery的工具提示工具 - 更改標題

有一個問題與jQuery插件工具提示（http://flowplayer.org/tools/tooltip/index.html）我需要改變的元素的冠軍。jQuery的工具提示工具 - 更改標題

reloadTooltip(); 
    $("#example").attr('title', obj.text); 
    reloadTooltip(); 

    function reloadTooltip(){ 
     $("[title]").tooltip({ position: "bottom right", opacity: 1 }); 
    }

HTML部分：

<span title="text" id="example"></span>

我的解決方案，我得到最後的2個標題，一個在另一個之上。沒有風格的（被忽略的js）是新的。工具工具提示標題尚未更改。

謝謝

來源

2011-07-11 smo

圖片的失敗：http://i.imgur.com/Be4zS.png 還發現，有一類至極包含所有的工具提示文本..

（由jQuery插件，我認爲自動生成） – smo

我即將做同樣的事情。我查看了Tooltip插件代碼，發現它是更新工具提示的快捷方式。該插件刪除title屬性並將該內容放入名爲tooltipText的元素屬性中。在jQuery的1.6+，它可以被操縱，像這樣：

// get the current tooltip content 
$('#someElement').prop('tooltipText') 

// set the tooltip content 
$('#someElement').prop('tooltipText', 'w00t');

插件設置ToolTipText屬性（注意大小寫）在第55行中的1.3版本。據我所知，以這種方式完成的更改是即時的。

如果這樣做的直接元素操作，提示內容爲：

var e = document.getElementById('#someElement'); 
alert(e.tooltipText); 
e.tooltipText = 'w00t';

來源

2012-09-09 23:32:33

謝謝！這很有幫助。 – Ryan

這個怎麼樣？

initTooltip(); 
    updateTooltip(obj.text); 


    function initTooltip(){ 
     $("[title]").tooltip({ position: "bottom right", opacity: 1 }); 
    } 

    function updateTooltip(text){ 
     $("[title]").attr('title', text); 
     $("[title]").data('title',text); 
     $("[title]").removeAttr("title"); 
    }

我不知道這是否是最好的方法，但我認爲它可能適用於您。

obj.text是否正確？什麼是obj.text？

來源

2011-07-11 13:37:24

是的，這是正確的。我可以提醒它沒有問題。 var obj = jQuery.parseJSON（data）; – smo

有沒有你不這樣做的原因：function reloadTooltip（）{（「＃example」）。tooltip（{position：「bottom right」，opacity：1}）; } –

我已經試過了。不幸的是，上述可能性沒有什麼區別。:( – smo

嘗試通過調用jQuery的數據（「title」）方法來修改標題值。

來源

2011-07-11 13:45:23

我使用的是v1.2.6，這是我唯一的工作。'$（'tooltip selector'）。data（「title」，「some tooltip text」）;' –

不知道你是否仍然在尋找答案，但我花了好幾個小時嘗試排序相同的東西，並找到了答案（很簡單，因爲他們總是找到它們！）在API文檔中。

不管元素是什麼，你首先設置工具提示，從它獲得工具提示API並設置新的值。即，如果您在ID爲「myTip」的元素上設置了工具提示，則可以使用

$('#myTip').data('tooltip').getTip().html("New string!") ;

Et瞧。

您不應該刪除標題（並且不應該因爲工具提示被延遲初始化）。代替使用cancelDefault配置：

http://flowplayer.org/tools/tooltip/index.html

來源

2011-08-27 19:19:26 Chris

這很好。這是一個愚蠢的例子，但這是我做的：onBeforeShow：function（b）{this.getTip（）。html（$（b.target））。 attr（'id'））;} – Eric

另一種解決方案，以動態地改變的標題是使用onBeforeShow事件：

jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow}); 

... 

function tooltipBeforeShow() { 
    // On production you evaluate a condition to show the apropiate text 
    var text = 'My new text for the <b>tooltip</b>'; 
    this.getTip().html(text); 
}

this指工具提示對象上的事件功能

來源

2012-06-19 17:53:23 Ismaelj

你是怎麼知道這個前夜的nt？這不是在文檔中。 – alexserver

我也掙扎與此有關。此代碼對我有用：

$('.yourelement').attr('tooltipText', newToolTip);

請注意大寫T。小寫T將不起作用。

來源

2012-11-05 15:40:40

明白了！根據最新版本的工具提示（截至v2.3.1）https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 您需要設置屬性（而不是屬性）'data-original-title'，因爲這一個是工具提示當前正在使用的。

這是一個黑客，但我希望它適合你，因爲它爲我工作。

$('#example').attr('data-original-title','the new text you want'); //and that's it.

來源

2013-05-01 20:57:14 alexserver

這是唯一的答案，適用於我，角度v1.3與bootstrap。 – miyasudokoro

同樣適用於Bootstrap 4和Angular 5 – hughjdavey

沒有爲我工作，但重新初始化工具提示：

 //Save the current configuration. 
     var conf = trigger.data('tooltip').getConf(); 
     trigger.removeData('tooltip').unbind(); 
     //Add the changed text. 
     var newText = 'Hello World!'; 
     trigger.attr("title", newText); 
     //Reapply the configuration. 
     trigger.tooltip(conf);

涉及getTip（）以前的答案需要的工具提示中顯示至少一次;否則，getTip（）會返回null。

使用OnBeforeShow幾乎爲我工作，但我無法弄清楚如何解除事件，以便它不會執行我顯示的每一次。

由於某些原因，更改標題對我不起作用，可能是由於我使用的是自定義佈局。

來源

2014-02-28 11:25:13 John

最適合我的工具提示！這提示像Gmail的

enter image description here

頭部現場：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script> 
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">

在HTML：

<a class="example" href="#" original-title="Hello World">Hover over me</a> 

<br/> 

<a class="example" href="#" original-title="Hello World">Hover over me</a> 

<br/> 

<a class="example" href="#" original-title="Hello World">Hover over me</a>

於JavaScript代碼：

$(function() { 
    $('.example').tipsy(); 
});

訪問演示jsfiddle

來源

2014-05-25 19:08:40 mghhgm

上述所有不tooltipster最新版本的工作，正確的方法是：

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";

來源

2014-07-05 07:27:55

所有其他選項沒有對tooltipster的最後一個版本的工作（3.3.0 ）我發現這個命令的工作：

$('#selectorElement').tooltipster('content', 'new title');

來源

2015-04-02 07:18:21

這是唯一對我有用的答案。 –

這爲我工作：。

$（ '＃yourID'）ATTR（ '數據原標題'， '新消息'）提示（「上海流 '）的工具提示（' 隱藏「）;

來源

2016-11-14 01:52:30

jQuery的工具提示工具 - 更改標題

回答

相關問題