使用tooltip弹出图片

最新推荐文章于 2024-08-03 16:08:42 发布

Welkin_qing

最新推荐文章于 2024-08-03 16:08:42 发布

阅读量3.3k

点赞数

分类专栏： css 文章标签： tooltip 弹出图片

本文链接：https://blog.csdn.net/Welkin_qing/article/details/90754829

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

1. 解决bootstrap tooltip出现问题
2. 弹出文字（两种方法）
- - 1. 纯css
  - 2. 使用popper.js
3. 积累一些popover的使用知识
4. 记录自己出现的问题

1. 解决bootstrap tooltip出现问题

在直接引用bootstrap tooltip 组件时，确定引入bootstrap.js 时还会弹出错误，如下所示：
在这里插入图片描述
没有引入 popper.js
进入官网：https://github.com/FezVrasta/popper.js

按照命令，下载下图两个
在这里插入图片描述
然后再引入 dist/umd下的popper.js 文件即可

2. 弹出文字（两种方法）

1. 纯css

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../public/css/main.css">
  <style>
    /* START TOOLTIP STYLES */
    [tooltip] {
      position: relative;
      /* opinion 1 */
    }

    /* Applies to all tooltips */
    [tooltip]::before,
    [tooltip]::after {
      text-transform: none;
      /* opinion 2 */
      font-size: .9em;
      /* opinion 3 */
      line-height: 1;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      pointer-events: none;
      position: absolute;
      display: none;
      opacity: 0;
    }

    [tooltip]::before {
      content: '';
      border: 5px solid transparent;
      /* opinion 4 */
      z-index: 1001;
      /* absurdity 1 */
    }

    [tooltip]::after {
      content: attr(tooltip);
      /* magic! */

      /* most of the rest of this is opinion */
      font-family: Helvetica, sans-serif;
      text-align: center;

      /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
      min-width: 3em;
      max-width: 21em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 1ch 1.5ch;
      border-radius: .3ch;
      box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
      background: #333;
      color: #fff;
      z-index: 1000;
      /* absurdity 2 */
    }

    /* Make the tooltips respond to hover */
    [tooltip]:hover::before,
    [tooltip]:hover::after {
      display: block;
    }

    /* don't show empty tooltips */
    [tooltip='']::before,
    [tooltip='']::after {
      display: none !important;
    }

    /* FLOW: UP */
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
      bottom: 100%;
      border-bottom-width: 0;
      border-top-color: #333;
    }

    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
      bottom: calc(100% + 5px);
    }

    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
      left: 50%;
      -webkit-transform: translate(-50%, -.5em);
      transform: translate(-50%, -.5em);
    }

    /* FLOW: DOWN */
    [tooltip][flow^="down"]::before {
      top: 100%;
      border-top-width: 0;
      border-bottom-color: #333;
    }

    [tooltip][flow^="down"]::after {
      top: calc(100% + 5px);
    }

    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
      left: 50%;
      -webkit-transform: translate(-50%, .5em);
      transform: translate(-50%, .5em);
    }

    /* FLOW: LEFT */
    [tooltip][flow^="left"]::before {
      top: 50%;
      border-right-width: 0;
      border-left-color: #333;
      left: calc(0em - 5px);
      -webkit-transform: translate(-.5em, -50%);
      transform: translate(-.5em, -50%);
    }

    [tooltip][flow^="left"]::after {
      top: 50%;
      right: calc(100% + 5px);
      -webkit-transform: translate(-.5em, -50%);
      transform: translate(-.5em, -50%);
    }

    /* FLOW: RIGHT */
    [tooltip][flow^="right"]::before {
      top: 50%;
      border-left-width: 0;
      border-right-color: #333;
      right: calc(0em - 5px);
      -webkit-transform: translate(.5em, -50%);
      transform: translate(.5em, -50%);
    }

    [tooltip][flow^="right"]::after {
      top: 50%;
      left: calc(100% + 5px);
      -webkit-transform: translate(.5em, -50%);
      transform: translate(.5em, -50%);
    }

    /* KEYFRAMES */
    @-webkit-keyframes tooltips-vert {
      to {
        opacity: .9;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
      }
    }

    @keyframes tooltips-vert {
      to {
        opacity: .9;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
      }
    }

    @-webkit-keyframes tooltips-horz {
      to {
        opacity: .9;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
      }
    }

    @keyframes tooltips-horz {
      to {
        opacity: .9;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
      }
    }

    /* FX All The Things */
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
      -webkit-animation: tooltips-vert 300ms ease-out forwards;
      animation: tooltips-vert 300ms ease-out forwards;
    }

    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
      -webkit-animation: tooltips-horz 300ms ease-out forwards;
      animation: tooltips-horz 300ms ease-out forwards;
    }

    /* UNRELATED to tooltips */
    body {
      margin: 0;
      min-height: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      font-family: sans-serif;
      background: #ededed;
    }

    main {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 100vh;
      flex: 1 1 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    aside {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      background: #49b293;
      color: #fff;
      padding: 1em;
    }

    main div {
      text-align: center;
      color: #353539;
    }

    main span {
      padding: .5em 1em;
      margin: .5em;
      display: inline-block;
      background: #dedede;
    }

    aside a {
      color: inherit;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      padding: .4em 1em;
    }
  </style>
</head>

<body>
  <div>
    <span tooltip="Slide to the left" flow="left">Left</span>
    <span tooltip="Slide to the right" flow="right">Right</span>
  </div>
  <script src="../../node_modules/jquery/dist/jquery.js"></script>
  <script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="../../node_modules/popper.js/dist/umd/popper.js"></script>
</body>

</html>

2. 使用popper.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../public/css/main.css">
</head>

<body>
  <!-- <div>
    <span tooltip="Slide to the left" flow="left">Left</span>
    <span tooltip="Slide to the right" flow="right">Right</span>
  </div> -->
  <!-- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on top">Tooltip on top</button> -->
  <a id="app" class="btn" data-toggle="popover" data-placement="bottom">555</a>
  <script src="../../node_modules/jquery/dist/jquery.js"></script>
  <script src="../../node_modules/popper.js/dist/umd/popper.js"></script>
  <script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
  
  <script>
    $('#app').popover({
      trigger: 'hover',
      html: true,
      content: 'jjjjj'  //这里也可以加html标签<img src="../../2.jpg">
    })
  </script>
</body>

</html>

参考文章：https://blog.csdn.net/liona_koukou/article/details/51942308

3. 积累一些popover的使用知识

1. bootstrap里popover实现点击区域外关闭隐藏的方法：http://www.aijquery.cn/Html/bootstrap/224.html

$("[t='popover']").on("click mouseenter",function(e){
    e.stopPropagation();
    var $this=$(this);
    $this.popover("show");
    $(document).one("click",function(){
        $this.popover("hide");
    });
    $(".popover").on("click",function(e){
        e.stopPropagation();
    });
});

2. popover的方法

在这里插入图片描述

3. 事件

在这里插入图片描述

4. 记录自己出现的问题

strCmp = strCmp + '<td><a href="javascript:;"id="'+matches[j].id+'"flow="right" class="priviewImg" οnclick="displayImg(this)">'+matches[j].name+'</a></td><td>'+matches[j].account+'</td><td>'+matches[j].staffId+'</td><td>'+matches[j].sim+'</td>'+ '</tr>'

function displayImg(obj) {
  var id = obj.getAttribute('id');//获取属性
 // console.log(id)
  $.ajax({
    url: '/api/faceguard/employees/' + id,
    type: 'GET',
    dataType: 'json',
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Difg-Header-BizCode', localStorage.getItem('Biz_Code'))
    },
    success: function (data) {
      if (data.code === 0) {
        var pri_img = data.result.image;
       var str = '<img width="150px" src="https://img-blog.csdnimg.cn/2022010612124056225.jpg' + pri_img + '">'
        $(obj).popover({
          trigger: 'click',
          html: true,
          content: str
        }).popover('show'); 
       
        setTimeout(function(){
          $(obj).popover('hide')
        },1000)

      } else {
        $(obj).popover({
          trigger: 'click',
          html: true,
          content: "未找到.."
        }).popover('show');
        setTimeout(function(){
          $(obj).popover('hide')
        },1000)
      }
    }
  })
}