JQuery的Tooltipster插件不顯示在HTML內容

一個超鏈接的工具提示我跟着官方文檔的說明：JQuery的Tooltipster插件不顯示在HTML內容

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惠特洛的小提琴，我意識到，當主「工具提示容器」是一個超鏈接本身這個問題只發生。我認爲將其定義爲超鏈接或客戶端可以使用鍵盤專注於它的另一個標記是有意義的，否則我認爲它會遇到可訪問性問題。

來源

2016-08-27 1man

你在得到任何錯誤，你的控制檯在缺少圖像之外（如果有的話）？你的代碼在Firefox，Chrome和IE瀏覽器中都可以正常工作，並且沒有損壞的圖像。 [jsfiddle]（https://jsfiddle.net/qb2osn4w/1/） – xorspark

你有看到我的小提琴嗎？錨標籤在那裏。沒有錯誤。工作正常。 – xorspark

@xorspark，對不起，我錯過了你的小提琴。讓我再次嘗試我的代碼。不管怎樣，謝謝你。 – 1man

你的問題是你的錨中有一個嵌套錨。雖然可能是可能的，但我強烈建議刪除內部的錨標記，否則只有內部的錨標記並使容器成爲一個跨度。

如在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/

來源

2016-08-27 03:16:41

感謝您的回覆。我添加了我的JavaScript代碼。還更新了我的問題，以澄清問題發生的確切情況。 – 1man

我根據你給我的新信息更新了我的答案。希望這能解決問題。 –

首先要注意的是，我們應該定義主標籤作爲超鏈接或客戶端可以集中使用鍵盤的另一個標籤，否則我認爲這將有可訪問性問題。那麼你的回答意味着基本上沒有辦法在工具提示中添加超鏈接。對？ – 1man

繼喬希惠特洛的有關嵌套錨關心，我想我找到了一個解決方案：

我們應該在「tooltip-container」之外定義「tooltip_content」嗎？

下面是HTML代碼：

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

下面是JavaScript代碼：

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

這裏是的jsfiddle：

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

來源

2016-08-27 14:04:21 1man

JQuery的Tooltipster插件不顯示在HTML內容

回答

相關問題