Ich versuche, einen Tooltip mit Schaltflächen (zum Beispiel wie LinkedIn) zu erstellen.Tooltip mit Schaltflächen und Bild

Das ist, was ich bisher versucht habe: (aber von hier stecken)

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

Ausgabe:

Aber ich Ich bin nicht in der Lage zu rechnen heraus, wie man <buttons> und auch Bild zum Tooltip hinzufügen?
Wie formuliert die Lösung nur für HTML/CSS/JS und HTML/CSS?

Erwartete Ausgabe:

Danke

Quelle

2017-02-11 TechnoCorner

Ich schlage vor, zu verwenden, »Pop über "statt" tooltip "http://www.w3schools.com/bootstrap/bootstrap_popover.asp – Merlin

Ich würde vorschlagen, Bootstrap verwenden popover wie es flexibler ist. Siehe Bootstrap-Dokumentation für popover here

Hier ist ein einfaches Beispiel, wie man es verwenden

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

Quelle

2017-02-11 09:22:29 Merlin

Erstaunlich Merlin! Nur ein Gedanke, wenn ich dies nativ mit HTML5/HTML4, CSS (/ CSS3) implementieren würde, wie würde ich das tun? (Nur ein Gedanke) – TechnoCorner

Sie würden auch etwas Javascript benötigen. Wenn Sie mit div arbeiten, das Element zeigen/verbergen, die Position bestimmen, auf der das Popover erscheinen soll, sollte es in Ordnung sein, dies mit HTML/CSS/JAVASCRIPT zu tun. Aber es ist so einfach, es mit Bootstrap zu machen, ich würde es nicht selbst machen. – Merlin

Tooltip mit Schaltflächen und Bild

Antwort

FIDDLE

Verwandte Themen