Question

我有一个电子邮件图标的图像，我想在您点击图像时显示工具提示。这是一个应该如何应用的示例，除了它应该是我的电子邮件图标图像：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="contact@oxybin.travel" 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;
}

我遇到的问题是，当我点击图片时，工具提示只显示不到一秒钟，我希望它一直保持到你点击屏幕上的其他地方然后它就会消失。我该如何解决这个问题？

Answer 1

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>

Answer 2

我找到了解决方案。问题是我将图像包装在一个标签内，所以每当我点击图像时它会显示工具提示并更新我的页面，这就是问题所在。

Bootstrap工具提示仅显示第二个

2 个答案: