Is it possible to access a service within the config function or access a provider from inside a service?

Need help configuring angular bootstrap tooltip (uibTooltip) to be disabled on mobile devices with angular-bowser for device detection.

One possible solution is:

isMobile = _bowser.mobile
$uibTooltipProvider.options = { trigger: isMobile ? "none" : "mouseenter" }

Issue: $uibTooltipProvider is a provider and bowser is a service.

Using $uibTooltipProvider is restricted to a config function, but the bowser service cannot be used in a config function. Additionally, $uibTooltipProvider cannot be used in a run function where bowser can be used.

Attempted to override the $get function as suggested here but the "ontouchstart" event in $window does not apply to tablets where tooltips should remain enabled.

Any suggestions for a workaround?

javascriptangularjstwitter-bootstraptooltip

Answer №1

After careful consideration, I made the decision to implement a minor CSS modification at runtime. I weighed the three available options:

1. Implement the GitHub hack: I was hesitant to use this method as it required me to manually identify which services were injected in the $get function of the uibTooltipProvider by trial and error. There seemed to be discrepancies between the services mentioned in the GitHub thread and the ones I needed to inject (see code snippet).

2. Incorporate the bowser library and use it statically: I dismissed this option because we already utilize angular-bowser as a dependency for our DeviceDetector service. Reusing the same library for configuring tooltip options and runtime functionalities seemed redundant.

3. Opt for a small CSS modification (my chosen option):

public disableTooltipsForTouchScreen(): void {
      if ( this._deviceDetector.isMobile() || this._deviceDetector.isTablet() )    {
        let styleSheet = document.createElement("style");
        styleSheet["innerHTML"] = ".tooltip { display: none; }";
        document.body.appendChild(styleSheet);
      }
    }

If a more precise control over the bootstrap-tooltip settings is necessary in the future, I will revisit option 2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for my Express server returning a 404 error for all files other than index.html?

Currently, I am delving into Node.js with Express in order to set up a small server for educational purposes. Strangely, every request made to files linked within my index.html file, such as the .css, .js, and image files, results in a response code 404. ...

javascriptnode.jsexpresswebserver

Utilize NgRepeat to access an unidentified array in AngularJS

In a complex multi-level array, there are objects nested at the deepest level. [ [ [ "FUND", { "totassets":10.9, "totdate":"2015-03-23", "expratiogross":1.35, "exprationet" ...

javascriptarraysangularjsobjectangularjs-ng-repeat

Linking promises together when one promise is only executed under certain conditions

In the scenario where I have two promises chained together, it looks like this: var promise1; var promise2 = promise1.then(function() { }); There's a condition that the execution of promise1 is dependent on. For example: if(userid == 123) { // ...

angularjsangular-promise

Is real-time updating possible with data binding in Polymer and JavaScript?

I have a scenario where I am working with two pages: my-view1 and my-view2. On my-view1, there are two buttons that manipulate data stored in LocalStorage. On my-view2, there are two simple div elements that display the total value and the total value in t ...

javascriptdata-bindingpolymer

Using JavaScript to search JSON objects based on key value pairs

Consider a scenario where you have an array of objects in users.json: {"key":"userSubscriptions","value": [{"channel":"Netflix","user":"Bobby","region":"NA"}, [{" ...

javascriptarraysjsonfilter

Tips for handling ng-if during element presence checks

There's a hidden div on my web page that is controlled by an ng-if directive. I'm looking to create a test that confirms the presence of the element only when it should be visible. If the condition set by ng-if is not met, the element is complete ...

javascriptangularjsprotractor

What is the most effective method for triggering individual sounds when hovering and clicking?

Hello everyone! I must admit, I am quite new to JavaScript and don't have much knowledge about it. I've shared my question on Reddit as well, so I'm hoping to get some guidance there too. Currently, I am working on editing a website and I w ...

javascriptjqueryhtmlaudio

Using Three.js to rotate a camera-followed sphere in the scene

Currently, I'm developing a Three.js scene with a toy concept where I aim to track a sphere using a camera [demo]. However, I am facing an issue wherein I can't seem to get the sphere to "roll" without causing the camera to also rotate along with ...

javascriptthree.js

Modifying the language setting in React Native for user interface preferences

After successfully setting up react-native-i18n and verifying its functionality, I encountered an issue. I am looking to dynamically change the locale within the React Native app itself. To attempt this, I included a button using Touchable Opacity and imp ...

javascriptreactjsreact-nativeinternationalization

Confusion arises between Bootstrap button plugin and Vue checkbox click event

After incorporating bootstrap.min.js into my Vue app, I noticed that the checkboxes' @click event is no longer triggered. This issue specifically occurs when using bootstrap's button-group with data-toggle="buttons". If I remove bootstrap.min.js, ...

javascripttwitter-bootstrapvue.jsdom-events

Toggle the visibility of multiple divs depending on a specific attribute value

I previously inquired about this issue, but I believe my wording was unclear and the responses focused on how to display or hide a group of divs when clicking a button. While I understand that concept, my specific challenge is slightly different. Let me pr ...

javascriptjqueryhtmlcssangularjs

Can you explain the process of retrieving API information from a component directory with Next.js?

In the components folder, I have created a reusable component that displays user details for those who log into the system in the header section. Currently, I am attempting to utilize getInitialProps with isomorphic-unfetch. static async getInitialProps( ...

javascriptreactjsnext.js

Ways to retrieve the locale parameter from the URL in Next Js

For my Next Js application, I've successfully implemented multi language support using the next-i18next module. Everything is working smoothly. Below is the code for my NabBar component: const NavBar = ({...props}) => { const router = useRouter( ...

javascriptreactjsreact-hooksnext.jsnext-i18next

Issue with Material-UI Nested Checkbox causing parent DOM to not update upon selection changes

Currently, I am integrating a nested checkbox feature from a working example into my application. The functionality of the checkboxes covers seven different scenarios: - Scenario - No children, no parent selected - Select the parent -> select both pa ...

javascriptreactjsmaterial-ui

Tips for releasing a dual npm package with both CommonJS and module support to ensure consistent imports of submodules

Trying to figure out how to package an NPM package so that it includes both CommonJS and ES modules that can be imported using the same absolute module path has been a challenge for me. I want to ensure that regardless of whether it's in a node or bro ...

javascriptnode.jsnpmes6-modulescommonjs

I need the title to be filled with the input data and the content to be filled with the textarea data

import React from 'react'; export default class CreateNote extend React.component { constructor(props) { super(props); this.state = {note:{title:" ",content:" "} }; console.log(this.state); ...

javascriptreactjsstate

Implementing the Delete feature using AJAX in this specific scenario: What is the best approach?

My website utilizes PHP, Smarty, MySQL, jQuery, and other technologies. It involves fetching a large amount of data from the database and presenting matching question ids on a webpage. This process of retrieving and displaying the matching question ids for ...

javascriptphpjquerymysqlajax

Guide for setting up multiple checkbox event listeners with jQuery

I currently have 2 checkboxes on my form: <form action=""> <input id="bikeCheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I own a bike<br> <input id="carCheckbox" type="checkbox" name="carCheckbox" value="Car">I ...

javascriptjquery

Writing a CSV file to AWS S3 proves to be unsuccessful

I have been working with TypeScript code that successfully writes a CSV file to AWS S3 when running locally. However, I have recently encountered an error message: s3 upload error unsupported body payload object NOTES: The code is not passing creden ...

javascriptnode.jstypescriptamazon-web-servicesamazon-s3

Tooltip not displaying value on Google Line Chart when hovered over

Utilizing the Google Line Charts within Angular2 and TypeScript, I encountered an issue. While the line chart appeared visually appealing, the tool-tip did not display the exact values when hovered over a point on the chart. I'm puzzled as to why the ...

javascriptangulargoogle-visualizationlinechart