是否可以在title屬性內添加html？

Question

有沒有一種方法可以將實際的html代碼放在表行元素的title屬性內？ 我的目標是不僅彈出文本，還彈出一些信息圖形，因此，如果鼠標懸停事件不是模式的，那將是很好的。 我走錯了方向嗎？

該表已經在使用jquery數據表，但是我不認為它可以執行此類事件。

<tr title='This activity will be open to registration on April 31st' >
.....
</tr>

Answer 1

不。 您需要使用JavaScript創建自己的標題替換。

Answer 2

本機工具提示不使用HTML。 jQuery UI工具提示在這里將非常有用。

演示： http ： //jqueryui.com/tooltip/

編輯 ：您將需要使用content選項來使用標記而不是title屬性。

$(".text")
    .tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });

這是一個小提琴來演示： http : //jsfiddle.net/acbabis/64Q2m/

Answer 3

沒有。

HTML不能放在屬性中。

如果目標是彈出一個包含豐富內容的彈出窗口，則您需要通過JavaScript進行處理。 此外，從可訪問性的角度來看，您可能始終不想將這么多的內容放入title屬性，因此采用JS路線將為您解決一些問題。 Google的“ JS工具提示”提供了數十種選擇。

Answer 4

您可以使用jquery ui工具提示插件顯示自定義標題

Answer 5

而不是關注title屬性，而是在目標<td></td> （表數據元素）內包含帶有標簽的彈出消息。 然后在該td中放置一個類以使用CSS控制div，先將其隱藏，然后在鼠標懸停在特定表數據元素上時使其內容可見。 像這樣：

<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>

然后，您的CSS可能類似於：

td.info-tooltip div {

display:none;

}

td.info-tooltip:hover {

position:relative;
cursor:pointer; 

}

td.info-tooltip:hover div {

position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block; 
width: 500px; /* give this your own width */

}

Answer 6

沒有直接方法可以呈現在工具提示中編寫的HTML代碼。 但是，如果您使用的是jQueryUI（或者，如果可以），則下面的代碼將顯示HTML效果（渲染），而不是工具提示中的HTML代碼。

要求 ：jQuery，jQueryUI.js，jQueryUI.css

HTML代碼：

<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>

JavaScript：

$(function() {
        $( document ).tooltip({
              items: '[title], [data-title]',
              track:true,
              content: function(){
                  var element = $( this );
                    if ( element.is( "[title]" ) ) {
                      return element.attr( "title" );
                    }
                    if ( element.is( "[data-title]" ) ) {
                      return element.attr( "data-title" );
                    }
              }
        });
});

Answer 7

使用Bootstrap工具提示可以執行以下操作

<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>

對我來說，它會自動發生，但您可能需要使用javascript觸發它。

$(function () { $('[data-toggle="tooltip"]').tooltip() })

docs

Answer 8

我認為一個不錯的選擇是將內容放在data屬性內，如下所示：

<div data-tooltip="Some information I want to show">
    Actual content
</div>

然后，編寫一個簡單的jQuery插件，將其懸停在元素內即可顯示該內容。