简体   繁体   English

如何使用nvd3工具提示向工具提示添加“箭头”

[英]How to add an 'arrow' to the tooltip using the nvd3 tooltip

Is there any way I can add an arrow next to the nv.tooltip hover like the way the bootstrap has?? 有什么办法可以像引导程​​序那样在nv.tooltip悬停旁边添加一个箭头?

Eg: Bootstrap tooltip/popover 例如:Bootstrap工具提示/弹出框

在此处输入图片说明

nvd3 tooltip: nvd3工具提示:

在此处输入图片说明

You can use .nvtooltip:before and make a triangle using CSS. 您可以使用.nvtooltip:before并使用CSS制作一个三角形。 Check here 在这里检查

You can check demo here . 您可以在此处查看演示。 Add the below styles in the CSS tab. 在CSS标签中添加以下样式。

 .nvtooltip:before { 
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #d1d1d1; 
    position: absolute;
    top: 16px;
    left: -12px;
 }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM