CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TechnoCorner
TechnoCorner

Reputation: 5145

Tooltip with buttons and image

I am trying to create a tooltip with buttons (Just like LinkedIn) for example.

This is what I have tried so far: (but stuck from here)

.tooltip{
  display: inline;
  color:black;
  position: relative;
  top:200px;
}

.tooltip:hover:after{
    background: grey;
    border-radius: 5px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    top: -53px;
    width: 163px;
}

.tooltip:hover:before{
  border:solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0px 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <a href="#" title="This is some information for our tooltip." class="tooltip"><span title="More">Linkedin Profile</span></a>
    </body>
</html>

Issue:

  1. But, I'm not able to figure out how to add <buttons> and also image to the tooltip?

  2. How does the solution formulate for HTML/CSS/JS and HTML/CSS only?

Expected output:

enter image description here

Thank you

Upvotes: 7

Views: 17530

Answers (1)

Merlin
Merlin

Reputation: 4917

I would suggest to use Bootstrap popover as it is more flexible. See bootstrap documentation for popover here

Here is a simple example on how to use it

FIDDLE

HTML 

<div class="container">
  <h3>Bootstrap 3 Popover HTML Example</h3>
    <span data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login" class="btn btn-default" >Click me</span>
    <div id="popover-content" class="hide">
        <div class="row">
         <div class="col-xs-4">
           <img width="88px" height="88px"src="https://pbs.twimg.com/profile_images/816404989392211968/Wv_8ZDrX_400x400.jpg"/>
         </div>
         <div class="col-xs-8">
           <h4>
           Justin Trudeau <br/>
           <small>
             Prime minister of Canada
           </small>
           </h4>
           <button class="btn btn-sm btn-primary">
           Follow
           </button>
           <button class="btn btn-sm btn-default">
           View profile
           </button>         
         </div>
    </div>
</div>

JAVASCRIPT 

 $("[data-toggle=popover]").popover({
        html: true, 
        content: function() {
              return $('#popover-content').html();
            }
    });

Upvotes: 6

Related Questions