引导工具提示文本更改 [英] Bootstrap tool-tip text change

问题描述

我遇到了一个问题，我想要更改工具提示的文本，但似乎没有这样做，相反，如果您将鼠标悬停在上面，则会将文本您的新标题。我只想改变文字，并将文字悬停在正在显示的文字上。

< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7 / css / bootstrap.min.css>< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< div class =container> < h3>工具提示示例< / h3> < a href =＃id =buttondata-toggle =tooltiptitle =Hooray！>将鼠标悬停在我身上< / a>< / div> tooltip（）

c $ c> plugin在tooltipped元素上创建一个 data-original-title 属性，并复制该元素的 title 的初始内容

对 data-original-title 的动态更改反映在工具提示中，而 title 中的更改不会影响它（在它已经被初始化之后）。

  $（document）.ready（function（）{$（'[data-toggle =tooltip]'）。tooltip（）; $（＃按钮）。attr（'data-original-title'，'your new title'）;}）;  

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css/>< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>< script src =https：//maxcdn.bootstrapcdn .com / bootstrap / 3.3.7 / js / bootstrap.min.js>< / script>< div class =container> < h3>工具提示示例< / h3> < a href =＃id =buttondata-toggle =tooltiptitle =Hooray！>将鼠标悬停在我身上< / a>< / div>  

I'm having an issue where I want to change the text for the tooltip, but it seems it's not doing so, and instead if you hover over you'll the text "your new title." I just want to change the text along with having that hover on text being displayed.

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $("#tool").attr('title', 'your new title');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" id="button" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

解决方案

jQuery's tooltip() plugin creates a data-original-title attribute on the tooltipped elements, and copies the initial content of that element's title attribute into it.

Dynamic changes to data-original-title are reflected in the tooltip, whereas changes in title do not affect it (after it has already been init'ed).

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $("#button").attr('data-original-title', 'your new title');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" id="button" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

这篇关于引导工具提示文本更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！