1

我正在使用 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>
4

2 回答 2

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。）

于 2013-09-05T17:42:50.840 回答
2

尝试使用“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 设计的传统编码方式。但是，这对于您的场景会更优雅。

于 2013-09-05T20:31:59.557 回答