tooltip to work for mouse hover and click both - ngbootstrap - javascript

I am using https://ng-bootstrap.github.io/#/components/tooltip/ and required to open tooltip on mouse over and also on click.
Basically, on mouse hover text1 appears and on click tooltip text changes to text2. In examples I see only on one event ( either on click or hover).
best example is - https://pypi.org/project/nltk/ - same functionality I needed using https://ng-bootstrap.github.io/#/components/tooltip/.
Angular 7 is being used in my project.

You can use the context and manual triggers functionality of ngb-tooltip to achieve this.
In your HTML, define the tooltip:
<ng-template #tipContent let-greeting="greeting">{{greeting}}</ng-template>
The above HTML will display the value of the variable greeting as the text in the tooltip.
Also define the button (or other HTML) element that you want the tooltip to appear on
<button
type="button"
class="btn btn-outline-secondary mr-2"
[ngbTooltip]="tipContent"
triggers="manual"
#t1="ngbTooltip"
(mouseover)="openTooltip(t1, 'text 1')"
(mouseout)="closeTooltip(t1)"
(click)="openTooltip(t1, 'text 2')">
Tooltip on top
</button>
This uses manual triggers, and you can bind to the mouseover and mouseout events to display the tooltip text 1 on hovering over the button. The click binding will display the tooltip text 2 when clicking on the button.
The openTooltip function is defined in the TypeScript file opens the tooltip passing in the text that was passed in as an argument to the method. The line tooltip.close() is required otherwise the clicking on the button to display the text 2 tooltip will not work:
openTooltip(tooltip, greeting: string) {
tooltip.close();
tooltip.open({ greeting });
}
There's a working StackBlitz demo here.
The closeTooltip function simply closes the tooltip:
closeTooltip(tooltip) {
tooltip.close();
}

Related

Updating the tooltip content doesnt update because its already initialized?

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());
});

how to enable select text in swiper.js

I am using this library for swiping, it's working fine as expected but i have this issue of text selection, so how to enable select text in <div class="swiper-slide>some text </div>
By default the click event acts as a touch event and the slide follow the mouse movement when you hold it. I have two solutions to select text inside a slide.
Option 1
You can wrap your text with a span element with class swiper-no-swiping to disable swiping only on the text.
<div class="swiper-slide"><span class="swiper-no-swiping">some text</span></div>
Option 2
You can use the simulateTouch parameter to disable the click event as touch event in the whole area of the slides.
new Swiper('.swiper-container', { simulateTouch: false });

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.
Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker
You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

Can you make a browser display an HTML title attribute after setting it dynamically?

I need to be able to show what would appear to be a tooltip when the user hovers over an element, but the text I need to display is only known after the user hovers, which triggers an ajax call to a server to get the text to be displayed, which I then set as the title attribute of the element.
Since there was no title attribute when the user began hovering over the element, no tooltip is displayed, even after I set the title. I have to mouse off the element and then back onto it before the tooltip appears.
Is there any way to force or fake the browser into displaying the tooltip after I've set the title attribute?
Using jquery .on( "mouseover", handler ) event you can add a span with .fadeIn()
You just have to make it look like a tooltip with css
Here are some bootstrap tooltip examples from w3schools bootstrap tool tip might help you,
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I had the same issue and at the end, I used Bootstap's tooltip:
$('#element').tooltip('show')

How can I manipulate alert() with a toggle element?

I have some icons with jQuery toggleClass() to switch the icons, let's say Icon A and Icon B, when clicked. I also want an alert box to show up ONLY when changing from Icon A to Icon B.
I applied click() method together with alert() but the alert box simply shows up every time I click the icons (either when switching from Icon A to Icon B or from Icon B to Icon A.)
Is there a way to manipulate the alert box to achieve my goal? Please look at my pen for a clearer example. Thank you.
Check the class of the child i element when you click your heart. If it has the class fa-heart then it's filled:
$("a[id^=heart-]").click(function(){
if($("i", this).hasClass('fa-heart'))
alert("I need this alert box only when I fill the hearts.");
});
Updated pen

Categories