如何制作圆形的 Jquery UI 工具提示？答案

【问题标题】：How do I make rounded Jquery UI tooltips?如何制作圆形的 Jquery UI 工具提示？
【发布时间】：2014-06-23 07:11:17
【问题描述】：

这是我的样式表中的 css。天气我使用 ui-tooltip 或制作我自己的自定义工具提示类并在工具提示初始化中指定它，它不会圆角。我假设存在一些 css 优先级冲突，但我对 css 完全陌生，还不确定它的工作原理。

我真的只需要圆角。

.ui-tooltip {
  position: absolute;
    background: #f9a235;
    color: #fff;
    padding: 6px 0px; 
    border-width: 1px;
    border-radius: 25px;
  }

【问题讨论】：

您是否为工具提示指定了高度或宽度？
把 !important 放在你的边界半径之后看看是否有帮助
我没有给它任何高度或宽度，我会尝试添加！important
我们还需要看一些 HTML 和更多的 CSS。最好能发fiddle 并附上一个例子。
看这里：jqueryui.com/tooltip/#custom-style

标签： javascript jquery css jquery-ui stylesheet

【解决方案1】：

您当前的实施有什么问题？

Working Demo in Fiddle

这应该可以解决问题：

.ui-tooltip {
    border-radius: 25px;
}

截图：

确保检查浏览器兼容性，因为这在 IE8 中不起作用：
http://caniuse.com/border-radius

【讨论】：

这在我的浏览器中有效，与许多其他示例一样。它是一个相当大的 struts 应用程序，有很多移动部件，这并不是我真正的知识领域。据我了解，它应该可以正常工作，这就是我如此迷失的原因。