ブートストラップのツールチップに2番目の画像しか表示されません

イメージをメールアイコンにして、画像をクリックするとツールチップが表示されます。 jsfiddle exampleと、ここで私が持っているコードです：：ここでは、それは私の電子メールアイコン画像上でこのようにする必要があり除き、それはどうあるべきかの一例であるHTMLは：ブートストラップのツールチップに2番目の画像しか表示されません

<!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; 
}

私が抱えている問題は、イメージをクリックすると、ツールチップがわずか1秒間しか表示されず、画面上の他の場所をクリックして消えるまでそれを残しておきたいということです。これをどうすれば解決できますか？

出典

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

ブートストラップのツールチップに2番目の画像しか表示されません

答えて

関連する問題