I have used Bootstrap (bundled with Popper) in my project to show a Tooltip when you hover on a button. I use the code from Bootstrap docs. However the tooltip is not visible.
<li className="nav-item">
<button type="button" className="btn grad-text"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Meet the Algorithms"
>
<i className="fas fa-solid fa-laptop-code fa-lg"></i>
</button>
</li>
The above code here shows title on bottom on hover. That was visible even before I added
data-bs-toggle="tooltip" data-bs-placement="top"
to my <button> element. Below is the screenshot of the same.
I am using raw Bootstrap not React-Bootstrap and the version I am using is 5.2.3
Can anyone help me with how to show the tooltip like Bootstrap Tooltip over here. Thank you.
Related
I investigated a lot of topics about using button as a link but didn't found a solution for me - I need to open a certain page in a new tab using React bootstrap button.
<Button onClick={() => onClickOpenVacancy(id)}>
React bootstrap offers a prop 'href' but no info how to open in new tab. Any suggestions, please?
You should use href and target together:
<Button href="URL" target="_blank" onClick={() => onClickOpenVacancy(id)}>
It looks like they just leave target with type any without further documentation. It just works the same way as the attribute that exists on the usual <a> tag does.
You could add the button inside the anchor tag
<a href='https://example.com/' target="_blank">
<button className="test" onClick={() => onClickOpenVacancy(id)}>
Click Here
</button>
</a>
or
<button className="test"
onClick="window.location.href = 'https://example.com" target="_blank">
Click Here
</button>
or..not really needed for you still a way would be
<form action="https://example.com/" target="_blank">
<button className="test" type="submit" onClick={}> // onClick not needed
Click Here
</button>
</form>
If onClickOpenVacancy was meant to do the redirection, then you don't need onClick function. the href and target are enough.
Pass in the complete URL in this code snippet and it should work
<Button onClick={() => window.open(URL, '_blank')}>ID</Button>
It's nothing specific to library like bootstrap, etc
I have a business need which is as shown below
here i have used DropdownButton from react bootstrap to achive the above menu
<span className="widget-controls" mr-eye-widget-type='Menu'>
<DropdownButton
alignRight
drop='down'
title="" className="download-CSV-button fa fa-ellipsis-v ">
<Dropdown.Item>Testttt</Dropdown.Item>
<Dropdown.Item>
<CSVLink { ... switchRef } data={this.state.downloadData} asyncOnClick={true} headers={this.state.dowloadHeader} filename={this.state.downloaFileName}>
<span className="csv-download" mr-eye-widget-type='DownloadButton' >
<div className="fa fa-download listColor" >
<span className="download-text">{widgetLabelConfig.englishConfig.Resource_Download_as_CSV}
</span></div>
</span>
</CSVLink>
</Dropdown.Item>
</DropdownButton>
</span>
and also here in the code one of the menu item is Testttt which is displaying where as second menu item has CSVLink which is a npm react-csv module for download this will not be render in the dom when i put it outside drop menu it works fine please let me know why is it failing when it is inside DropdownButton
I have a simple sidebar with dropdowns. I want the dropdowns to be toggled on click. I used data-target property for this. But its not working as expected.
<div className="dropdown">
<span className="dropdown-toggle" data-toggle="collapse" data-target="#target">Toggle Dropdown</span>
<ul id="target" className="collapse">
<li><i className="fa fa-bar-chart"></i><span className="menuName">Options</span></li>
</ul>
</div>
How do i accomplish this in react js??
If you are using react-bootstrap as you mentioned in title and also added the tag, then this is the way you can achieve the drop-down.
<DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
<MenuItem eventKey="1">Dropdown link</MenuItem>
<MenuItem eventKey="2">Dropdown link</MenuItem>
</DropdownButton>
Data attributes should work normally. You have error in your syntax because you are using class attribute on all the elements except the first span, instead of className.
is there any way to have img and Icon Corner Icon using Semantic Ui. so i need to have the img show and add icon to it
<span>
<i class="huge icons">
<img src="test.jpg"></img>
<i class="corner add icon"></i>
</i>
<span>
I'm assuming that you are using semantic-ui-react.
You can do:
<Icon.Group size='huge'>
<img src="test.jpg" />
<Icon corner name='add' />
</Icon.Group>
You can find more examples HERE
before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap.
Here is the code of my button:
<button class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</button>
Do you know how to make tooltip displayable even when the button is disabled?
Similar to janosch's solution - wrap your button in a div which has the tooltip attribute.
<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
<button disabled="isDisabled">Button</button>
</div>
The tooltip will only be visible when the variable isDisabled is true, which also sets the disabled status of the button.
This solution will also work if you are using the title attribute instead of uib-tooltip
I don't think it's possible on a button, but it works if you use link disguised as a button, instead of a button:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</a>
Simplest, least intrusive solution to this is:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="isAllSelected ? doThat() : null">Click Here
</a>
(notice conditional ng-click, without which clicks will still go through even when anchor is "disabled" - i.e. anchors don't support disabled attribute)
I know this question is several years old however someone might find useful this workaround.
What I did was to wrap the button content in a <span> tag and apply the uib-tooltip to it:
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span>
</button>
If you also need the tooltip to be shown when the user hovers over the whole button area, you can also remove the button padding and add it to the <span> instead.
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span>
</button>
Irrespective of button being enabled or disabled, I am getting the uib tool tip. The below code is working fine for me.
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>
Please see this plunker
Added screenshot of tooltip
Additional notes: You can also configure the position of tooltip. All you need to do is to take the help of $uibTooltipProvider. We can then use config section to achieve the result. Below code is included in the plunker.
angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.options({
'placement':'bottom'
});
}])