부트 스트랩 툴팁에 초 표시 만 있음

이미지를 이메일 아이콘으로 사용하고 이미지를 클릭 할 때 툴팁을 표시하려고합니다. 여기가 내 이메일 아이콘 이미지를 다음과 같이해야한다를 제외하고 어떻게해야의 예입니다 jsfiddle example은 여기 내가 가지고있는 코드입니다 : HTML부트 스트랩 툴팁에 초 표시 만 있음

<!DOCTYPE html> 
<html> 
<head> 
    <title>Help</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="mai.css"> 
</head> 
<body> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="group"> 
       <a href=""><img data-toggle="popover" data-placement="bottom" title="[email protected]" class="icons" alt="Email icon" onmouseover="this.src='Travel/email-color.png'" onmouseout="this.src='Travel/email.png'" src="Travel/email.png"></a> 
      </div> 
     </div> 
    </div> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
    <script> 
     $(document).ready(function(){ 
      $('[data-toggle="popover"]').popover(); 
     }); 
    </script> 
</body> 
</html>

CSS는 :

html { 
    margin: 15px; 
    padding: 0px; 
    border: 0px; 
} 

.icons { 
    width: 60px; 
    height: 60px; 
    margin: auto; 
    display: block; 
} 

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

내가 가지고있는 문제는 내가 이미지를 클릭 할 때 툴팁이 잠깐 동안 나타나지 않고 화면의 다른 곳을 클릭 한 다음 사라질 때까지 머무르고 싶다는 것입니다. 이 문제를 어떻게 해결할 수 있습니까?

출처

2017-12-01 Linus

[mcve]를 만들고 이미지 (또는 리셀러, 크기가 같은)를 포함하여 필요한 모든 리소스를 연결하십시오. –

This 나를 위해 어떤 브라우저를 사용하십니까?

<button class="btn btn-xs btn-info gly-radius" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip"> 
    <span><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1674-200.png"></span> 
    <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span> 
    <!-- Alert --> 
</button>

출처

2017-12-01 17:47:40 Srax

해결책을 찾았습니다. 문제는 이미지를 태그 안에 넣었을 때 이미지를 클릭 할 때마다 툴팁을 표시하고 페이지를 업데이트하는 것이 문제였습니다.

출처

2017-12-01 17:50:20 Linus

부트 스트랩 툴팁에 초 표시 만 있음

답변

관련 문제