I am curious if there is a feature in intro.js that allows for the highlighting of text or images to

I am having trouble getting intro.js to work with Ionic 4 as the highlighted text is not showing up

view image here

This is how I implemented the code in Angular 7:

intro() {
let intro = introJs.introJs();
intro.setOptions({
  exitOnOverlayClick: false,
  showStepNumbers: false,
  showBullets: false,
  overlayOpacity: 0.8,
  doneLabel: "GOT IT",
  nextLabel: "GOT IT",
  steps: [
    {
      element: '#search-img',
      intro: "Search here by accounts, contacts, etc.",
      position: 'top',
    }, {
      element: '#search-text',
      intro: "Search here by accounts, contacts, etc.",
      position: 'top',
    },
    {
      element: '#search-box',
      intro: "Search here by accounts, contacts, etc.",
      position: 'middle',
    },
    {
      element: '#profile',
      intro: "Click on profile icon to view your DPN account & saved 
      list",
      position: 'bottom',
      floatVArrow: 'right'
    }
    ]
   });
   intro.start();
   }

Answer №1

To customize the appearance of a specific step, utilize the highlightClass attribute by assigning it to a class (e.g., .my-bespoke-class) in your CSS where you can adjust properties like opacity or color.

You may also be able to modify the opacity of the overlay for a step using the overlayOpacity property (this is possible in Shepherd as well).

let intro = introJs();

intro.setOptions({
  exitOnOverlayClick: false,
  showStepNumbers: false,
  showBullets: false,
  overlayOpacity: 0.8,
  doneLabel: "GOT IT",
  nextLabel: "GOT IT",
  steps: [
    {
      element: '#search-text',
      intro: "Search here by accounts, contacts, etc.",
      position: 'top',
      highlightClass: '.my-bespoke-class',
      overlayOpacity: '1'
    }
    ]
   });

intro.start();
#search-text{
  width: 300px:
  margin: 10px auto;
}

.my-bespoke-class{
  background: orange;
  font-size: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa3a4beb8a5e4a0b9e7a7a3be8af9e4fae4fa">[email protected]</a>/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddb4b3a9afb2f3b7aef0b0b4a99deef3edf3ed">[email protected]</a>/intro.min.js"></script>

<html>
<body>
<div id="search-text">This is the target element</div>
</body>
</html>

For more details and resources, refer to the official documentation available at

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

Customizing the navbar to be inverse on each webpage using CSS, PHP, and Bootstrap

Dealing with a Bootstrap navbar across multiple pages on my website is becoming a hassle. Every time I need to make a change, I find myself jumping from one page to another just to update it. My objective is to have the ability to edit the navbar in one ce ...

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

I've encountered an issue that seems to be a bit different from what others have experienced. Despite trying various solutions, I still can't seem to fix it. I suspect it might have something to do with how I'm importing my plugins. The erro ...

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...

Disabling the outline border on bootstrap select elements

I have integrated this plugin into my project and I am attempting to eliminate the blue border when the select box is focused. I attempted to achieve this by setting the outline to none using the following code: *:focus { outline: 0!important; } Additi ...

Utilize CSS to create a visual buffer at the bottom of the header

I'm having trouble creating a gap between the bottom of "headermenu" and the top of "list". No matter what values I use for margin-bottom or padding-bottom, the table won't budge. I could try adding margin-top to the table, but I would prefer to ...

How to remove an event listener that was added within a function in JavaScript?

I am encountering an issue while trying to remove an event listener that was created inside a function. Oddly enough, it works perfectly when I move the event listener outside of the function. See the example below: <body> <div id='myDiv&apo ...

Using @font-face to include several files for different font-weight variations

I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...

Ways to move down only one level of an element's children, excluding sub-levels

When implementing this code snippet: jQuery: $(this).next().slideDown() with a selector :$(this).next() HTML: <li class="sub-menu two-level-collapse"> <a href="javascript:void(0);" class="two-level-collapse parent">< ...

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

The carousel spun around, each section moving to the side on its own

One issue I'm facing is that on my page, I have multiple carousel rows. However, when I click on the "next" or "prev" button to navigate through the items in the carousel, it affects all carousels instead of just the one I clicked on. I've attem ...

Issue with *ngFor not running when utilizing a module variable in an ionic/angular application

Currently, I am working on an Ionic/Angular application where I encountered an issue with displaying values from a list using *ngFor within a statement. It seems that *ngFor is not functioning properly for some reason. When I use *ngFor="let i of eventLis ...

Issue with primeNg password ToggleMask functionality not functioning properly

While working on my code, I successfully implemented the passwordModule. However, when I attempted to add toggle mask functionality, I encountered an issue. <input id="float-password" type="password" [to ...

Ways to adjust the color dynamics of a mat-slider

I am looking to dynamically change the color of a mat-slider. In my app, users have the ability to select any color from a color palette, and I want to display that selected color as the slider color. While I know you can add custom color names in the col ...

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

Material selection through span in three.js is not functional

Initially, the span element was functioning properly for me. However, after setting up materialsLib and initMaterialSelectionMenus based on the documentation and examples, the span stopped working and now the model is not visible. Any assistance would be g ...

Employing ngModel in an option dropdown

I am having trouble passing an attribute from an API call to a submit function. I suspect it might have something to do with either the option select or how the input is being formatted. Encountering the error Error: No value accessor for form control wit ...

Troubleshooting CORS issue when using POST method in Spring Boot

I currently have a setup with a Spring Boot application serving as the backend with a rest controller, and an Angular application as the frontend. Both applications are running on localhost with SpringSecurity enabled. Initially, I faced issues when trying ...

Struggling to center with margin 0 auto

I'm having trouble aligning the middle paragraph in an HTML footer. I attempted to use floats for layout: the first paragraph is floating to the left, the third paragraph is floating to the right, and the second (middle) paragraph has a margin of 0 au ...

The implementation of a secondary sidebar for internal pages

Currently, I am in the process of customizing a Wordpress theme and my goal is to achieve a similar 3-column layout for the homepage as seen on . Specifically, I am interested in replicating the inner sidebar's custom image title. The theme I'm ...