css - 如何设置工具提示的样式？

Question

我有一个显示两组不同信息的工具提示。我需要看到两者之间的某种突破，因为现在这一切都在一行中。

<ng-template #template let-anchor>
    <span style="font-size: 17px;">
        Last Sale Date : {{ lastSale.lastSaleDate }}
    </span>
    <span style="font-size: 17px;">
        Next Sale Date: {{ nextFuture.nextFutureDate }}
    </span>
 </ng-template>



<div kendoTooltip
     showOn="none"
     [tooltipTemplate]="template"
     filter=".k-grid td"
     (mouseover)="showTooltip($event)">

我希望以一种很好的格式和 2 条分隔线来查看它，这样它就不会重叠。

Answer 1

你可以试试这个代码

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<div class="container">
  <div class="row">
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-placement="bottom" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><a href='/link'><b>Geoff</b> - content</a></div><div><b>Hilary</b> - content</div>">Click <i class="fa fa-rss" aria-hidden="true"></i></a>
            
      <hr>
    </div>
  </div>
</div>