Question

我想在按钮的标题中添加图像以及文本.. 我已经尝试通过使用title =＆＃34;＆＃34;。

中的以下php代码来添加图像

 <?php  echo"<img class='file-attach'     src='".get_template_directory_uri()."/images/file-attachment.png'/>"; ?>

<button type="button" class="btn btn-default tooltip-buttons" data-toggle="tooltip" data-placement="top" title="Here you'll see">?</button>

Answer 1

我实现了一个带有类似真实图片的工具提示，这里是代码：

$("[ctitle]").hover(
  function(e) {
    $("<div id='txt'>").css({
      "display": "none",
      "width": "auto",
      "height": "auto",
      "color": "#767676",
      "border": "solid 1px #767676",
      "font-size": "12px",
      "font-family": "Arial",
      "position": "absolute",
      "padding": "2px 3px 2px 3px",
      "background-color": "white",
      "box-shadow": "3px 3px 1px gray",
      "left": 0,
      "top": 0
    }).appendTo("body").html($(this).attr('ctitle')).stop().fadeToggle().css({
      "top": e.pageY,
      "left": e.pageX
    });

  },
  function() {
    $("[id='txt']").stop().fadeToggle(function(){
            $(this).remove();
        })
  }
);

基本上将代码添加到您的页面（包括JQuery）并使用ctitle代替title。在ctitle属性中，您可以添加其他HTML代码进行格式化。

Here is the JSFiddle demo

如何在工具提示的标题中添加图像？

1 个答案: