CODEWITHSUNDEEP
html
anis mumtaz
anis mumtaz

Reputation: 29

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

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>

Upvotes: 1

Views: 481

Answers (1)

Ahs N
Ahs N

Reputation: 8386

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

Upvotes: 1

Related Questions