How to add image in the title of the Tool Tip?

Question

I want to add image in the title of the button along with text.. I have already tried to add image through using following php code in title="".

 <?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>

Using the native `title` attribute provided, no you cannot do that. You will have to implement a custom one if you need one that supports pictures as well. — Ahs N, Jan 21 '16 at 10:20
http://stackoverflow.com/questions/15274123/how-do-you-add-an-image-to-a-jquery-tooltip — Mushahid Khan, Jan 21 '16 at 10:44
Refer to this link might solve your issue http://stackoverflow.com/questions/15274123/how-do-you-add-an-image-to-a-jquery-tooltip — Mushahid Khan, Jan 21 '16 at 10:45

score 1 · Answer 1 · answered Jan 21 '16 at 11:12

I implemented a tooltip with picture that resembles the real ones, and here is the code:

$("[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();
        })
  }
);

Basically add the code to your page (include JQuery) and use ctitle instead of title. In the ctitle attribute you can add other HTML codes to format.

Here is the JSFiddle demo

How to add image in the title of the Tool Tip?

1 Answers1