예를 들어 버튼이있는 툴팁 (예 : LinkedIn과 같은)을 만들려고합니다. 나는버튼과 이미지가 포함 된 툴팁

그러나 (하지만 여기에서 붙어)

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

문제 :

이
내가 지금까지 시도한 것입니다 이해할 수 없다. <buttons>을 추가하는 방법을 설명하고 이미지를 툴팁에 표시 하시겠습니까?

솔루션은 HTML/CSS/JS 및 HTML/CSS에 대해서만 어떻게 공식화됩니까?

예상 출력 : 더 유연로

당신을 감사합니다

출처

2017-02-11 TechnoCorner

내가 사용하는 것이 좋습니다 사용하는 방법에 대한 간단한 예입니다 팝 오버에 대한 부트 스트랩 설명서를 참조하십시오 '팝 이상'툴팁 대신 http://www.w3schools.com/bootstrap/bootstrap_popover.asp – Merlin

나는 부트 스트랩 popover를 사용하는 것이 좋습니다 것입니다. 여기 here

그것이

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

출처

2017-02-11 09:22:29 Merlin

놀라운 멀린! 그냥 생각, 만약 내가 이것을 기본적으로, 표준 HTML5/HTML4, CSS (/ CSS3)를 사용하여 구현하는 것이라고 내가 어떻게 할거야? (그냥 생각) – TechnoCorner

당신은 어떤 자바 스크립트도 필요합니다. div로 재생, 요소 보이기/숨기기, HTML/CSS/JAVASCRIPT로 popover가 나타나야하는 요소가 나타나는 위치를 결정하십시오. 그러나 부트 스트랩으로 그렇게하는 것은 쉽지 않을 것입니다. – Merlin

버튼과 이미지가 포함 된 툴팁

답변

FIDDLE

관련 문제