Bootstrap 4 dynamic tooltip with custom class - javascript

I create a dynamic tootltip on target element in the following way :
var dynamicTooltip = new bootstrap.Tooltip($(targetElement));
Everything work just fine, but i would like to add to the generated tooltip a custom class.
Is not clear to me how can i target to the html generated by bootstrap with the previous instruction (or better which bootstrap API should i use to attach a class).
I see that bootstrap tooltip have a class named "tooltip" but i can't use that class to find my newly generated element eg :
$(".tooltip")
In fact i am afraid that the code above will find also already existing tooltip, and i want target only the newly generated one.
How can i achieve that?

From bootstrap docs:
Here
You can use the template option to give complex HTML structure, or just the customClass option to add custom classes:
var dynamicTooltip = new bootstrap.Tooltip($(targetElement), {
customClass: 'myCustomClass'
});

Related

Selecting custom element with document selector

I am writing an application in Stenciljs and my custom element is as follows:
<custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert>
Now, the issue is with selecting this element via document.querySelector() or any other possibility to remove or add the hide attribute. This can be done for standard HTML elements easily:
document.querySelector('input').removeAttribute('hide');
How can I do this for my custom element?
I was able to get the desired result by adding an id attribute
<custom-alert id="myCustomAlert" alertType="warning" alertId="warningMessage" >Be warned</custom-alert>
Then this component can be hidden and shown as follows:
document.getElementById('myCustomAlert').setAttribute('hidden', 'true');
And shown as follows:
document.getElementById('myCustomAlert').removeAttribute('hidden');

Dynamically create tooltip for an element

I am trying to show a tooltip when user selects random text on the page - think of annotating text.
I was able to dynamically create v-tooltip component. I have selected element in JS, but having trouble wrapping it with v-tooltip component. I was able to wrap it, but the tooltip is positioned to the top of the page, not on the wrapped element itself. I am also not sure my approach is the best one either.
Here is a JSFiddle example: https://jsfiddle.net/6xk7zLv9/
Is there better way to dynamically generate Vue components and insert into the DOM? How can I correctly attach tooltip to the selected element.
You need to specify a side prop (top/bottom/left/right) on the tooltip.
The activator slot is also optional, instead you can use the position-x and position-y props to place it wherever you want without replacing DOM elements: https://codepen.io/kaelwd/pen/LYWLxVe?editors=1010
window.getSelection().getRangeAt(0).getBoundingClientRect() will give you the position of the current selection: https://codepen.io/kaelwd/pen/poewRaE?editors=1010
If you want to get really fancy you can call getClientRects instead and have the tooltip follow the end of the selection: https://codepen.io/kaelwd/pen/vYxZgjb?editors=1010
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
https://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects

How can I use JavaScript with mdl-layout--fixed-tabs

I looked at numerous examples of mdl-layout--fixed-tabs usage.
I can't find any example of using mdl-layout--fixed-tabs with JavaScript. My goal is to make different REST backend calls depending on active tab.
MDL is just a collection of CSS classes, each applied to an HTML element.
JavaScript is used to manipulate the HTML underneath the MDL classes, so you just use JavaScript with MDL like you would with regular HTML.
var tab1 = document.getElementById("tab1"); // Where tab1 is the ID of
// of your HTML element with
// the applied MDL class.
// Do whatever else you need to do, etc...

Dojo - destroying tooltip widget when DOM node is destroyed

I use dijit/tooltips on a page that has a lot of domConstuct.destroy() and domConstuct.place() going on. So each time I remove some nodes from the DOM, I want to remove tooltips attached to those nodes. Currently the number of tooltip widgets is constantly growing on my page.
Is there a way to automatically remove a widget when corresponding DOM node is removed, or to check if existing tooltip widget's connect DOM node still exists?
You can attach a single Tooltip widget to multiple nodes at once, this may be the solution for you as you don't have to "manage" your tooltips anymore then. There's only one tooltip widget created for all tooltips, so you don't have to destroy it anymore.
The best way to achieve this is by using the selector property as described in the reference guide.
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
If they don't have a common connectId and/or selector, then you can still use a single tooltip by adding the target to the same tooltip instance by using the addTarget() function.
To remove a target you can also use removeTarget() which accepts a DOM node (so you just pass the DOM node you want to remove).
If neither of these solutions is able to help you I'd like to know how you instantiate your tooltips, there are multiple ways to do that. For example by using connectId or by creating an ad hoc tooltip using the show() function.
I found a solution to my problem with a help of Dimitri's answer. I don't create separate Tooltip widget for each tooltip any more, now I put all the tooltips in one Tooltip using it's .addTarget() method. The second part of the solution is iterating through Tooltip's connectId property and checking if the DOM node still exists. I had to do it using Javascript native methods .contains() and .getElementById(), because Dojo's dom.byId() and query() gave me false positives. So, my code now looks like this:
// creating Tooltip
var tooltips = new Tooltip({
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltiptext");
}
});
// adding tooltips
tooltips.addTarget(nameNode);
// deleting sufficient connects
for(var i = tooltips.connectId.length -1; i >= 0 ; i--){
if(!document.contains(tooltips.connectId[i]) && !document.getElementById(tooltips.connectId[i])){
tooltips.removeTarget(tooltips.connectId[i]);
}
}
The reason I had to use both .contains() and .getElementById() is that some of the nodes I attached tooltips to have ids and some don't, and Tooltip widget stores some of them as strings (id) and some as DOM nodes.

Get values from original css file using jQuery

I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.
If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.
Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);
Get rid of all inline CSS using this regex in your editor:
style="[^"]*"
i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class

Categories