Question

我正在使用jQuery Tipsy工具提示插件（http://onehackoranother.com/projects/jquery/tipsy/）。我做得很好。

但是，我无法使用多种样式（CSS）。我需要在我的网站上使用3种不同风格的工具提示。我只能设法使用一种风格。

非常感谢任何帮助。

提前干杯。

Answer 1

没有必要分叉，它已经通过＆＃39; className＆＃39;处理它。选项。您在此处指定的任何类都将添加到工具提示的最外层div。

例如，如果您想将工具提示背景和箭头颜色更改为蓝色，请像这样调用tipsy：

<script type='text/javascript'>
    jQuery(function($) {
        $('a[rel=tipsy]').tipsy({className: 'my-class'});
    });
</script>

然后添加这个CSS：

.my-class .tipsy-inner { background-color: blue; }

.my-class .tipsy-arrow-n { border-bottom-color: blue; }
.my-class .tipsy-arrow-s { border-top-color: blue; }
.my-class .tipsy-arrow-e { border-left-color: blue; }
.my-class .tipsy-arrow-w { border-right-color: blue; }

通过阅读有趣的来源，看起来你甚至可以给它一个回调（接受所选元素作为参数），这样你就可以动态地添加类。

Answer 2

我已完成更改并将修补程序应用于所有者。请看下面的补丁，它将允许自定义样式。

<强> JS

https://github.com/rakesh-sankar/tipsy/blob/patch-1/src/javascripts/jquery.tipsy.js

<强> CSS

https://github.com/rakesh-sankar/tipsy/blob/patch-2/src/stylesheets/tipsy.css

现在这样打电话：

<script type='text/javascript'>
    $(function() {
        $('a[rel=tipsy]').tipsy({clsStyle: 'blue'});
    });
</script>

你的CSS应该是：

.blue-tipsy {.....}

.blue-tipsy-inner {....}

.blue-tipsy-arrow {....}

请参阅working example here

Tipsy jQuery Tooltip插件 - 是否可以使用多种样式？

2 个答案: