I'm using ReactJS and bootstrap to create a popover over a button. When the user stays over this button for 2 seconds, the content and the title of this popover must change.
The problem is that before these 2 seconds, the popover has no title. So when I change both the title and the content, they change in the html, but the title keeps its previous "display:none" value. So even if it is correct in the html, I can't see it on screen.
If I give a title to the popover before changing it, then everything works fine. Both content and title are updated and visible.
How can I dynamically ADD a title to a bootstrap popover that was created without a title?
Here is my code:
render()
{
return (
<span
ref="popoverElement"
className={"popover_helper"}
onMouseOver={this.handleMouseOver}
onMouseLeave={this.handleMouseLeave}
data-container="body"
title={this.state.title}
data-content={this.state.content}
data-placement={this.props.pos}
/>
)
}
and when I update the value of this.state.content or this.state.title, I call:
updatePopover()
{
const popover = $(this.refs.popoverElement).data('bs.popover');
popover.options.title = this.state.title;
$(this.refs.popoverElement).popover("show");
}
When I look in the html of the page I obtain this for the title of the popover:
<h3 class="popover-title" style="display: none;">my tile</h3>
I finally found the solution using react-bootstrap and the OverlayTrigger (it also works with a simple Overlay):
https://react-bootstrap.github.io/components.html#popovers
It is very important to add the attribute shouldUpdatePosition={true}to the Overlay. This attribute is not part of the doc, but I found about it after extended research. This allows the Popover to update its position correctly when the content is modified.
Related
I'm not sure if I've got the title right here, if someone can recommend a better title I'll be happy to change it.
I have website that shows a list of products you can purchase, with a quick "add to wishlist" button. When you hover over the button, the tooltip says "add to wishlist", and when you click the button, the item is added to the wishlist.
The problem is, now that the item is in the wishlist basket, hovering over the button should say "remove from wishlist" but it still says "add to basket".
I'm trying to update this.
My code for displaying the icon is like this, using the data attribute.
<div class="wishlist-status js-wishlist-icon" data-tippy-content="#Html.Translate("ADD TO WISHLIST",Context)">
<partial name="~/Views/Shared/Components/SVG/_IconHeart.cshtml" />
</div>
I have a function that controls this functionality. My thinking was that I update this data value, and it will work. So I did this
var el = document.querySelector('.js-wishlist-icon');
el.setAttribute('data-tippy-content', 'remove from basket');
It does actually work. If I inspect the element, once I click the button, the value of it DOES say "remove from basket" in the markup, its just that the tooltip doesn't say that. It still says ADD TO WISHLIST when hovering. I think this is because its set when initialized, but I cant seem to update it.
I think I need an "updateTooltip" function. I think this website was built using Bootstrap, but I dont know if this functionality is Bootstrap or not. I've tried looking at https://getbootstrap.com/docs/4.0/components/tooltips/ but I'm not convinced anything there will help me.
Does anyone have any ideas? Thanks
I think I encountered a similar problem. I have an input field that I can edit text. And I want the tooltip shown (hovered) to also be updated whenever I change the input field.
I am using bootstrap 4.3.1 tooltip.
What I initially did:
Make sure title attribute and data-toggle attributes are present on the input element.
Bind tooltip to input element itself.
Make an event listener for input event so that title is updated with the current input field value.
I encountered a couple of problems such as
Window custom tooltip also appearing and messing with display of the bootstrap tooltip.
Like yours, the displayed tooltip is always the same as the original one. I set the initial title attribute to some test string and it was always the one shown even if I edited the input. Note that I also confirmed that my code properly changes the title attribute on input event.
What I did after:
Wrap the input element with parent div. Add the data-toggle and title attributes here.
Bind tooltip to this parent.
On input listener callback function, I also added code to update the attribute "data-original-title". It seems to be the basis for whatever is displayed on the tooltip and I am not sure as to why it is not updated.
Initial code:
A. html
<input id="input_field" title="">
B. Javascript/Jquery
$('#input_field').attr({
"data-toggle": "tooltip",
"title": ""
});
$('#input_field').tooltip({
placement: 'auto',
trigger: 'hover',
title: 'Fallback tooltip display'
});
$('#input_field').on('input', function(){
$('#input_field').attr("title", $().val('#input_field'));
});
Code after:
A. html
<div>
<input id="input_field" title="">
</div>
B. Javascript/Jquery
$('#input_field').parent().attr({
"data-toggle": "tooltip",
"title": ""
});
$('#input_field').parent().tooltip({
placement: 'auto',
trigger: 'hover',
title: 'Fallback tooltip display'
});
$('#input_field').on('input', function(){
$('#input_field').parent().attr("title", $('#input_field').val());
$('#input_field').parent().attr("data-original-title", $('#input_field').val());
});
I am Customizing the datatable-pager in ngx-dataTable and can able to add footers and pagers. I have only two issues as follows -
For prev / Next / First and Last button , How to show text instead of icon?
How to add totalVisible property to show first 3 and last 3 pages in the pager and show a ... disabled button in between?
currently I am writing the following code -
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible"
>
<datatable-pager
[pagerLeftArrowIcon]="datatable-icon-Left"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
(change)="table.onFooterPage($event)">
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
I need to pass some Text Props instead of the arro icons and next/prev icons to show text. And I also need to show first 3 and last 3 page buttons in the pager and show a ... disabled button in between in case there are more than 7 page to show Just like
to replace icons with text you will have to replace datatable-pager with your component, and provide the functionality. You can see here how datatable-pager has been implemented and create your own component.
Link: https://github.com/swimlane/ngx-datatable/blob/master/src/components/footer/pager.component.ts
If you need any help feel free to ask.
above provided url is not working, you can check below url which showing correct code https://github.com/swimlane/ngx-datatable/blob/master/projects/swimlane/ngx-datatable/src/lib/components/footer/pager.component.ts
It was using jquery ui tooltip like this
self.variable=ko.observable("a");
$(document).uitooltip({
//some settings
content: self.variable();
})
//Some event here which would update self.variable
The idea is by clicking a button inside of the tooltip, the self.variable would be updated and the content of tooltip would change. But while the variable would change, so far, i am not able to have it updated immediately. I have to hover in and out again to see updated content. What approach should I use?
--Update--
A example of the problem
http://jsfiddle.net/32b1n6p5/1/
What I want is that when I hover the first input--->the tooltip show up--->type anything--->tooltip change. But right now, I have to hover out and in again to see the change
I want to highlight a div which is part of a form using fancybox.
<form>
...
...
<div id='sub-form'>
...
...
</div>
...
...
<form>
I want to show the div with id = sub-form in a popup window and also in the main page. When value of an element in the popup is changed then value of that element in the parent window should change accordingly.
Mean while i want to highlight that div.
I tried it using fancybox but fancybox is removing it from the form and also hiding from the parent window.
Is it possible to do with fancybox? OR any plugin is available to do this task? Thanks!
can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.