如何将工具提示绑定到此html元素

时间:2016-09-02 03:25:00

标签: javascript jquery html tooltip

我的代码中有<?php // // Recommended way to include parent theme styles. // (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme) // add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); } // // Your code goes below // 时,我有这个html元素。

console.log

这就是我调用tooltipster的方法。但它不起作用。

<span id="stamps[12]" class="stamps value  widget-data  tooltipstered" data-value="0.00" data-toggle="tooltip">0.00</span>

1 个答案:

答案 0 :(得分:2)

如果您希望从tooltipster属性中获取data-*的内容,则需要在tooltipster构造函数中设置它(使用content属性)。

以下是一个例子:

&#13;
&#13;
$('[data-toggle="tooltip"]').each(function(v){
  console.log(this);
  $(this).tooltipster({
    content: $(this).data('value')
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<span id="stamps[12]" class="stamps value  widget-data  tooltipstered" data-value="0.00" data-toggle="tooltip">0.00</span>
<br />
<span id="stamps[13]" class="stamps value  widget-data  tooltipstered" data-value="12.23" data-toggle="tooltip">12.23</span>
&#13;
&#13;
&#13;