Question

我一直在尝试在我的网站上实现此mootools tooltip sample，问题是我正在使用mootools 1.4（mootools-core-1.4.1-full-compat.js）和示例使用classname即

var Tips4 = new Tips($$('.Tips4'), {
    className: 'custom'
});

对我不起作用。我可以看到文本但没有图像，firebug net tab没有显示任何资产缺失。

我确实有想要使用页面上其他样本的效果，但据我所知，这可以将我锁定为工具提示的单一样式。

 var Tips1 = new Tips($$('.Tips1'));

然后具有css设置，如此

.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
}

如果自定义类方法在1.4

中不起作用

我是否正确使用第二种方法我不能在页面上有2个单独的工具提示样式？实际上.tool-*样式是保留的吗？我尝试过像

这样的东西

.MyOtherTipStyle .tool-title
{
 //etc
}
.MyOtherTipStyle .tool-text
{
 //etc
}

但无论班级指定相同的

.tool-title
.tool-text

仅应用样式。

谢谢，

Answer 1

该演示似乎使用了不同版本的Mootools More，这是制作你的CSS的正确方法（1.4.2）：

.custom { }
  .custom .tip-top { }
  .custom .tip { }
    .custom .tip-title { }
    .custom .tip-text { }
  .custom .tip-bottom { }

以下是JSFiddle的更新版本，使用以前的格式：http://jsfiddle.net/3By77/4/。

此外，您忘记在JSFiddle中激活Mootools More，这就是它无效的原因。

无法使用classname：使用mootools 1.4工具提示

1 个答案: