javascript - 如何自定义Opentip默认样式？

我正在使用opentip框架来实现工具提示。由于我对Jquery和Java脚本很陌生，因此我已经使用Opentip HTML属性实现了该提示，但是需要更改其样式（如提示联合和背景颜色）。

有人可以帮我...在下面找到我的代码谢谢

#tooltip2{padding: 13px 0px 0px 10px;margin: -1px 4px -4px -5px !important;"}

<script src="https://rawgit.com/enyo/opentip/master/downloads/opentip-jquery.js"></script>
<link href="https://rawgit.com/enyo/opentip/master/css/opentip.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option" style="width:13%;float:left;">
<label style="padding:10px 0px 0px 10px;" id="tooltip2" data-ot="This is my new tooltip" data-ot-delay="1" data-ot-hide-trigger="closeButton" data-ot-style="glass" data-ot-fixed="true"  data-ot-tipJoint="'left, middle'">Option1</label>

</div>

最佳答案

首先，您需要将jQuery脚本标签移动到opentip脚本标签之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/opentip/master/downloads/opentip-jquery.js"></script>
<link href="https://rawgit.com/enyo/opentip/master/css/opentip.css" rel="stylesheet"/>

您可以使用data-ot-tip-joint属性设置尖端连接（注意，选项名称中的每个大写字母在成为属性时都会以连字符开头）。如果只需要中间的中间值，则实际上不需要单引号，也不需要逗号和中间的引号

data-ot-tip-joint="left"

将尖端接头设置到工具提示的左侧中心。您应该有足够的空间（以及更多一点）以适合工具提示-因此，如果目标位于视口的顶部，并且您进行了“左中”提示连接，则它可能会自动变为“左上方”，因为空间不足。

您使用background属性设置背景

data-ot-background="red"

您的完整HTML应该是

<div class="option" style="width:13%;float:left;margin-top: 100px">
    <label style="padding:10px 0px 0px 10px;" id="tooltip2" data-ot="This is my new tooltip" data-ot-delay="1" data-ot-hide-trigger="closeButton" data-ot-style="glass" data-ot-fixed="true" data-ot-tip-joint="left" data-ot-background="red">Option1</label>
</div>

我添加了一个上边距，只是为了证明如果有空间，它将与配置的尖端连接一起出现。

关于javascript - 如何自定义Opentip默认样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30118397/