Question

我按照官方文件的说明进行了操作：

http://iamceege.github.io/tooltipster/#htmlcontentalt

一切都很好。我添加的唯一额外内容是内容中的'a'标记，如下所示：

这是html代码：

<a class="tooltip-container">
    This div has a tooltip with HTML when you hover over it!
    <span class="tooltip_content">
      <a href="#"></a><img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</a>

以下是JavaScript代码：

$('.tooltip-container').tooltipster({
  functionInit: function (instance, helper) {
    var content = $(helper.origin).find('.tooltip_content').detach();
    instance.content(content);
  }
});

这是JSFiddle：

https://jsfiddle.net/c3ddf8bm/7/

不幸的是，工具提示没有显示任何内容！

注意：我在Chrome和IE的最新版本中对其进行了测试。

更新

在xorspark和Josh Whitlow的小提琴之后，我意识到这个问题只发生在主“工具提示容器”本身就是超链接时。我认为将它定义为客户端可以使用键盘关注它的超链接或其他标记是有意义的，否则我认为它将具有可访问性问题。

Answer 1

您的问题是您的锚中有一个嵌套锚。虽然可能可能，但我强烈建议删除内部锚标记，否则只有内部锚标记并使容器成为跨度。

如this post所示，即使你设法让它工作，它仍然会在子锚点出现之前关闭父锚点，这可能是导致工具提示停止工作的原因。

<强> HTML：

<div class="tooltip_templates">
<a class="tooltip-container">
  This div has a tooltip with HTML when you hover over it!
  <span class="tooltip_content">
    <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
  </span>
</a>

<强>使用Javascript：

$(document).ready(function() {
  $('.tooltip-container').tooltipster({
    functionInit: function (instance, helper) {
      var content = $(helper.origin).find('.tooltip_content').detach();
      instance.content(content);
    }
  });
});

要包含的文件：

工作小提琴：

https://jsfiddle.net/h6Lrvqay/1/

Answer 2

在Josh Whitlow关注嵌套锚之后，我想我找到了解决方案：

我们应该在“tooltip-container”之外定义“tooltip_content”吗？

这是html代码：

$('.tooltip-container').tooltipster({
  functionInit: function (instance, helper) {
    var content = $(helper.origin).parent().find('.tooltip_content').detach();
    instance.content(content);
  }
});

以下是JavaScript代码：

package com.example.ramosva.sunshine;

import android.app.Fragment;
import android.content.Intent;
import android.support.v4.app.FragmentActivity;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.support.v4.app.DialogFragment;
import android.widget.Adapter;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.List;
import  java.lang.Object;
import java.util.Arrays;


public class MainActivity extends AppCompatActivity {

    ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



    }

    public void simples(View v){

                Intent intent = new Intent(getApplicationContext(), SimpleFragmentActivity.class);
                startActivity(intent);
//        startService(intent);

    }

}

这是JSFiddle：

https://jsfiddle.net/c3ddf8bm/8/

JQuery Tooltipster插件不会在html内容

2 个答案: