jQuery tooltip customize style using content

Question

I need to customize my tooltip to look something like this: example

However, I am building it dynamically and need to add an image to the lookup with text so I am using the function "content". When I try to use this CSS in jsfiddle the arrow is messed up and it is adding an extra from to the image.

 $(function () {
  $(document).tooltip({
      items: ".link",
      tooltipClass: "arrow",

      content: function () {


          var $this = $(this),
              random, html = "";
          var frame = "<div class='arrow1'>";
          var lowertext = "<div class ='tooltiptext'>Learn More</div>"
          var image = "<img class='webimage' src='https://i.ytimg.com/vi/ER0wkPWykNE/default.jpg'/>"
          return frame + image + lowertext + "</div>";

      }
  });
});

Please see my jsfiddle here:

jsfiddle

Answer 1

See This Fiddle

Basically, I changed the following style rules to remove 2 of the borders from your arrow, changed the z-index so the content in the tool tip is always on top, and removed overflow:hidden from your arrow class so the arrow could be displayed. So these rules:

  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -15px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
    border-bottom:none;
    border-right:none;
    z-index:-1;
  }

  .arrow {
    width: 170px;
    height: 170px;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }