Question

我正在使用Dojo进行工具提示。当用户移动图标时，应显示该消息。

.claro .dijitTooltipConnector {
    background-image: none;
    background-repeat: no-repeat;
    border: 0 none;
    height: 14px;
    width: 16px;
    z-index: 2;
}

我想在此DataTextBox旁边显示此图标。谁这样做？请帮忙

<td>
    <p style="padding-left: 100px;">
        <label id="acid">Date for CC:</label>
        <input dojoType="dijit/form/DateTextBox" name="datecc" id="datecid" style="width:200px;" maxlength="50" />
    </p>
</td>

Answer 1

尝试使用“dijit.showTooltip（）”立即在任何地方显示工具提示，而无需为工具提示编写任何HTML代码。（类似地，“dijit.hideTooltip”用于隐藏相同的内容）。让我举一个小例子来说明如何使用它。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dijit/Tooltip"]);
function showTooltip() {
    var domNode = dijit.byId('datefld').domNode; //domNode to which the tooptip must point to
    dijit.showTooltip("Enter your date of birth here!!", domNode,["above"]); // you can use "above" or "below" or "right" or "left"
}
function hideTooltip() {
    var domNode = dijit.byId('datefld').domNode;
    dijit.hideTooltip(domNode);
}
</script>
</head>
<body class="claro">
<label for="firstname">Name: </label>
<input type="text" name="firstname" data-dojo-type="dijit/form/ValidationTextBox" id="firstname"  promptMessage="Enter your name here!"/><br/><br/>
<label for="firstname">DOB : </label>
<input type="text" name="datefld" data-dojo-type="dijit/form/DateTextBox" id="datefld" promptMessage="Enter your date of birth here!"/>
<br/><br/>
<span onmouseover="showTooltip()" onmouseout="hideTooltip()">hover here for tip!!</span>
</body>
</html>

注意：这是一种与新AMD设计混合的传统编码方式。但是，对于您的场景，这将更加优雅。

Answer 2

您是否尝试过使用dijit/Tooltip？

文档中的简化示例：

<button id="buttonId" data-dojo-type="dijit/form/Button">Button Text</button>
<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'buttonId',position:['above']">
    Tooltip Content
</div>

因此，在您的情况下，您可能需要dijit/Tooltip其connectId值引用datecid且其position值为['left','right']或您的排名首选项。（如果它不适合左侧，那么它将成为它的第二选择。）

请注意，此示例使用HTML ID值，但其他示例可以显示CSS选择器。（我已经创建了一个支持附加点名称的自定义子类，但它仍然是非常实验性的和hacky。）

如何使用dojo在文本框旁边添加工具提示

2 个答案: