I have a line code:
<TreeNode title={"abc"} ...>
Problem: When i hover mouse to this element, it display default tooltip text is title, in my example is "abc".
=> expected:
i want custom my text in tooltip, not default.
Hi
I solved it this way
<TreeNode value="parent 1-0" title={
<Tooltip placement="right" title={"abc"}>
<div style={{width: "100%"}}>abc</div>
</Tooltip>
}/>
Related
im trying to render a a side menu with a submenu , however i soon realize that the icon api is not working:
<Menu.Item key="1" >
<HomeOutlined />
<span>Home</span>
<Link to='/' />
</Menu.Item>
This is one of the menu items , it renders correctly if i were to place the icon within the menu.item.
However when i do this :
<Menu.Item key="1" icon={<HomeOutlined/>}>
<span>Home</span>
<Link to='/' />
</Menu.Item>
The icon no longer shows. I have no issues for the first approach , however when i try to tranplant the 1st approach to a submenu :
<SubMenu key="sub1" title="Settings">
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>
</SubMenu>
It would render the icon inside the inner dropdown instead of where its supposed to be
You can try this, the icon has to be part of the title parameter in order for the icon to be shown correctly when the menu is not expanded. :-)
<SubMenu key="sub1" title={<span><UserOutlined /><span>Settings</span></span>}>
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>
</SubMenu>
You can do this: -
<SubMenu key="sub1" title={<span><UserOutlined /><span>Settings</span></span>}>
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>
But there will be an issue of padding as the padding of Menu.Item is given relative to the title of the Sub-Menu and the padding is given as inline-css so you will not be able to override the css and it's a bad habit to use important. Here, you are using so if you want the content aligned than you can give padding to the Link.
I have an accordion that displays items I have entered values from some input items - e.g., if I select a date, the accordion displays the selected date etc.
sample screen - top portion is the accordion with selected values and the bottom portion is where I enter the values
Date: Sep 20 2013 | Customer: MLJJ
Date : ______
Customer : _________
I have a div that pops up when a user clicks on the input field for date. I wanted to do the same for the read-only text in the accordion. But the top portion of my date slider is hidden by the accordion. I have tried setting the z-index to some very high values, but to no avail. Is there a way to accomplish what I am trying to do. Thanks in advance.
Code Snippets
function positionMe(myTextBox) {
var mybox = myTextBox;
$("#popup").show();
$( "#popup" ).position({
of: $( mybox ),
my: "left top",
at: "left bottom"
});
}
popup is a div
<div id="popup">
<div class="input">
<div>
<input type="text" id="timeslice" size="5" />
</div>
</div>
</div>
I solved it myself -
I appended the popup div to the accordion element and then positioned it. That seems to show the popup.
$("div#top-criteria").append($("div#popup"));
positionRight('div#top-criteria');
Thanks
I apologize if the question was a bit vague.
I am looking for a way to use the datepicker with a button rather than a input box. When I click the button the date picker will appear as a dropdown to the button and on click some events will fire. Somethign like the following image
Any help?
If you are using an input field and an icon (like this example):
<input name="Date" id="Date" type="text" readonly />
<a href="#" id="Date_icono" ></a>
You can attach the datepicker to your icon (in my case inside the A tag via CSS) like this:
$("#Date").datepicker();
$("#Date_icono").click(function() {
$("#Date").datepicker( "show" );
});
OR
Turns out that a simple hidden input field does the job:
<input type="hidden" id="dp" />
And then use the buttonImage attribute for your image, like normal:
$("#dp").datepicker({
buttonImage: '../images/icon_star.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});
Initially I tried a text input field and then set a display:none style on it, but that caused the calendar to emerge from the top of the browser, rather than from where the user clicked. But the hidden field works as desired.
I am noticing that jQuery datepicker is neither activating the current element nor the next element in the tab index after tabbing into a field spawns a datepicker instance and the mouse is used to click on a day.
<input type="text" id="no1" />
<input type="text" id="no2" />
<input type="text" id="no3" />
$('#no2').datepicker();
$('#no1').focus();
If you check out http://jsfiddle.net/DgkJZ/1/
and tab to the second field, click a date, you'll see what I mean about the tab focus going nowhere. Is there some way around this that doesn't involve editing jQuery UI source?
Try to catch the onSelect and set focus accordingly
$('#no2').datepicker( {
onSelect: function() {
$('#no3').focus();
}
);
I am using Richfaces 4. I have a <rich:datatable /> with 4 columns. In that, first column is a <a4j:commandlink /> . I need to change the background color of the entire row when I click on the link. On click of the link I am calling action listener, and oncomplete I am rerendering the page. How do I change the color of the clicked row ?
Add on your link the onclick method :
<rich:column>
<a4j:commandlink onclick="changeBackground(this)" ...
</rich:column>
The Script (Using jQuery) to find the tr of the cell and apply style :
<script>
function changeBackground(element){
jQuery(element).parents('tr:first').addClass('backgroundRed');
}
</script>
and the css for example
.backgroundRed {
color: #555658;
background-color: red;
}
You can check this conversation to further information.