试图让一个链接在弹出框内工作答案

【问题标题】：Trying to get a link working inside of a popover试图让一个链接在弹出框内工作
【发布时间】：2020-06-22 15:58:21
【问题描述】：

当您将鼠标悬停在弹出框上时，我试图在弹出框内添加一个链接，但不幸的是，它不起作用。我想知道是否有人可以看到我做错了什么？我的方法是在另一个 a 标签内添加一个 href 标签，但它不起作用。任何指导表示赞赏。

    a:active:after {
        content: attr(title);
        padding: 5px;
        border: 1px solid #ccc;
        top: 5px;
        right: 10%;
        background: #bada55;
    }

    a:visited {
        color: green;
    }

    a:hover {
        color: DarkOrchid;
        text-decoration: underline;
    }

    a:active {
        color: yellow;
    }

    .twitter {
        margin: 2em auto 0px auto;
        font-family: Arial;
        font-size: small;
        font-weight: bold;
        color: #f5911d;
        text-align: center;
        padding: 0;
        left: 0px;
        top: 0px;
        overflow: visible;
    }
    /* SIGNATURE CODE */
    a {
        color: #f77d06;
        -o-transition: color .5s ease-out, background 7s ease-in;
        -ms-transform: color .5s ease-out, background 7s ease-in;
        -moz-transition: color .5s ease-out, background 7s ease-in;
        -webkit-transition: color .5s ease-out, background 7s ease-in;
        transition: color .5s ease-out, background 7s ease-in;
        text-decoration: none;
    }

        a:hover {
            color: #FFF;
            background: none;
            text-decoration: none;
        }

<div class="col-sm-2 col-xs-2 text-left">
    <i class="fa m-r-15 text-left" style="font-weight: bold"><a style="color:orangered" data-toggle="popover" title="LEARN MORE" data-content="Want to lear more Check out out definition page by clicking <a href='www.google.com'> here">My Pizza Deliveries</a></i>
</div>
                                    
<script>
  $(document).ready(function() {
   $('[data-toggle="popover"]').popover({
      placement: 'top',
      trigger: 'hover'
   });
});
</script>

【问题讨论】：

@urvashi 它位于 sn-p 的 html 部分的图标类中。

标签： html css popover

【解决方案1】：

弹出框不能包含 href 等，它们包含根据documentation 的纯文本。此外，选择和可能性非常有限。

但如果我们不提供适当的替代方案，就不会如此。

让我向您介绍tippy tooltips，这是一个高度可定制且文档齐全的工具提示库，在您的情况下基本上可以像这样实现：

const template = document.getElementById('example');
template.style.display = 'block';

tippy('#tippy-element', {
  content: template,
  interactive: true,
  interactiveBorder: 60,
});

#tippy-element {
    width: 30vw;
}

#example {
   color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Development Tippy tooltip -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<html>
    <body>

    <div class="col-sm-2 col-xs-2 text-left" id="tippy-element">My Pizza Deliveries</div>            
                     
    <a id="example" href="https://atomiks.github.io/tippyjs/">Click me</a>         
          
    </body>
</html>

【讨论】：

【解决方案2】：

我不明白你为什么将标签放在另一个标签中。您只需将链接放在 data-template 属性中即可。

<div class="col-sm-2 col-xs-2 text-left">
  <i class="fa m-r-15 text-left" style="font-weight: bold">
    <a style="color:orangered"
       data-toggle="popover" 
       title="LEARN MORE"
       data-template="<div>Want to lear more Check out out definition page by 
                           clicking 
                           <a href='https://www.google.com/' target='blank'>here</a>
                      </div>">My Pizza Deliveries</a>
  </i>
</div>

如果您想动态添加链接，请使用模板属性。

【讨论】：