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

Having trouble with transferring information from JQuery to PHP

Currently, I'm working on transmitting data from jQuery to PHP. Here's an excerpt of what I've done: var jsonArray = JSON.stringify(dataArray); $.ajax({ type: "POST", url: "addcar_details.php", ...

Hold off on showing the image until it has finished loading

// Here's the code snippet angular .module('imgapp', []) .controller('mainCtrl', mainCtrl); function mainCtrl() { var vm = this; vm.first = { title: 'Image 1', url: 'http://www.image-mapper.com ...

What is the best way to stack several items vertically beside an image?

As a beginner in the world of web development, I recently embarked on my first project. However, I am facing an issue where I cannot align multiple elements under each other next to an image. One element floats at the top beside the image, while the other ...

Having trouble with the find method when trying to use it with the transform

In my code, I have three div elements with different values of the transform property assigned to them. I store these elements in a variable using the getElementsByClassName method and then try to find the element where the value of the transform property ...

Exploring the functionality of typeahead with server-side data integration

I am utilizing ng-select with Angular 7 and creating the following component: export class PostComponent { selectedCategoryID: number; allCategories$: Observable<CategoryModel[]>; constructor(private catService: CategoryService) { } ngOn ...

The directive is dynamically altering the disable attribute of its parent element

I am faced with a scenario where I have both a button and a directive in my template. The button can be disabled based on certain parameters defined in the template itself, as well as by the directive (it gets disabled in case of a double click event). B ...

Dynamic reloading of a div with form data using jQuery's AJAX functionality

I am currently developing an online visitor chat software using PHP and MySQL. My goal is to load the page when the submit button is clicked. Submit Button ID: send Visitor ID: vid Chat ID: cid Below is the snippet of code for an Ajax request that I hav ...

Adjust the vertical size of the background hue on the span element within the text

Can the height of the background color in my span be adjusted? HTML <span class="highlight">Some highlighted text</span> CSS .highlight{ font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.5em; backgr ...

Get the latest html content and save it as a .html file using javascript or jQuery

Looking for a way to save an HTML page as a .html file? Having some trouble with jQuery modifications not being included in the exported file? Check out the code snippet below and let me know if you can spot what's going wrong! I'm still getting ...

"Utilize Tailwind to effortlessly place a single item at the center

Looking for a way to align a row of items with one item centered in the div and the others positioned on either side while maintaining their original order? Check out this code snippet: <div className="flex mx-auto justify-center items-center" ...

Title Bar: Excessive gap; inaccurate navigation to nearby link

I've been trying to align a horizontal navigation bar right below a banner and link directly to specific sections on the same page. No matter what I do, I can't seem to remove the white space between the banner image and the navigation bar. It ...

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

When deleting a row, the pagination feature in <mat-table> may encounter issues with the sticky

Struggling with a problem that I couldn't find a solution for online, so hoping to get some help here. I'm currently working on a dynamically-filled table where users can delete individual rows. The table has a sticky column and pagination, but I ...

Automatically sync textbox width with gridview dimensions

My goal is to dynamically resize a number of textboxes so that they match the width of my gridview's table headers. The gridview will always have the same number of columns, but their widths may vary. However, as shown in the image below, the width va ...

Implement new functionalities within JDL Jhipster for an Angular project

For instance, I am interested in incorporating functions such as onChange, focusout, onBlur, onClick while passing an extra parameter in jdl like this: <input type="text" class="form-control" name="firstName" (onChange)= ...

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

What is the solution to prevent angular-material components from covering my fixed navbar?

After creating a navbar using regular CSS3, I incorporated input fields and buttons from angular material. However, my sticky navbar is being obscured by the components created with angular material. Here is the CSS for the navbar: position: sticky; top: ...

Efficient management of npm dependencies versioning using Git workflow with Angular

In my Angular project, we combine multiple locally created artifacts that are published to the npm repository. Within the "dependencies" section of my app's package.json file, I include the following: "@k/e-lib": "^0.3.0", "@k/et-lib": "^0.3 ...

Can you determine the height of an image if only the width and border width are provided?

Currently delving into the world of HTML and CSS, I've successfully configured the img element's width and border width using a style element. However, one aspect that is still puzzling me is how the height is calculated in this scenario. I&apos ...

The memory usage steadily increases when you refresh data using the anychart gantt chart

I have a basic anychart code to update a gantt chart every second: function initializeSchedule(){ anychart.onDocumentReady(function () { anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) { documen ...