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>

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

1 个答案: