Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Want to improve this question? Update the question so it focuses on one problem only by editing this post .

Closed 5 years ago .

This plugin is very mixed. I developed a little this plugin. But I don't know how to add arrowColor and textColor properties. I couldn't share all of codes. Because exceeded maximum character length.

Also, you can see on github for original plugin: https://github.com/xbsoftware/enjoyhint

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<!-- EnjoyHint JS and CSS files -->
	<script src="enjoyhint.js"></script>
	<link href="enjoyhint/enjoyhint.css" rel="stylesheet">
  	<script type="text/javascript">
	$(document).ready(function(){
		var enjoyhint_instance = new EnjoyHint({});
		var enjoyhint_script_steps = [
			'next .navbar-brand' : 'Welcome to Turbo Search! Let me guide you through its features.',
			'nextButton' : {className: "myNext", text: "Sure"},
			'skipButton' : {className: "mySkip", text: "Nope!"}
      'arrowColor':'0,255,255'
      'textColor':'0,255,0'
			'key #mySearchButton' : "Insert your search request and press 'Enter'",
			'keyCode' : 13,
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
			'click .btn' : 'This button allows you to switch between the search results'
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
			'next .about' : 'Check the list of all the features available',
			'shape': 'circle',
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
			'next .contact' : 'Your feedback will be appreciated',
			'shape': 'circle',
			'radius': 70,
			'showSkip' : false,
			'nextButton' : {className: "myNext", text: "Got it!"},
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
		enjoyhint_instance.set(enjoyhint_script_steps);
		enjoyhint_instance.run();
                there is no 'arrowColor' and 'textColor' attributes in this plugin. The arrow is an svg image, if you want to change color, you should modify the core code of the plugin.
– Calvin Nunes
                Feb 16, 2018 at 11:39
                Yes i need to modify the plugin. Can someone change the plugin if there is someone better.
– user5774297
                Feb 16, 2018 at 12:25

There isn't an arrowColor and textColor in enjoyHint step properties.

The TextColor you can modify in the enjoyHint.css file, like this:

.enjoy_hint_label {
    color: #550055 !important;

The arrow, as I said in the comment above, is an svg that is created in the plugin core. So You can only modify it there, I suggest you to look for this in the enjoyhint.js:

var polilyne = $(makeSVG('path', 
    {style: 
     "fill:none; 
     stroke:rgb(255,255,255); 
     stroke-width:2", d: "M0,0 c30,11 30,9 0,20"

the above for the arrow point, and the below is for the arrow line:

that.$svg.append(makeSVG('path', 
     {style: 
      "fill:none; 
      stroke:rgb(255,255,255); 
      stroke-width:3", 'marker-end': "url(#arrowMarker)", d: d, id: 'enjoyhint_arrpw_line'


In both, look for the stroke:rgb(...) and change the values inside with the desired color....

dynamic you mean, for each step a different color? if yes, you'll need to find the elements with jQuery and then modify the css attributes, something like $("#enjoyhint_arrpw_line").css('stroke','rgb(0,0,0)'); but I'm not sure if this will work – Calvin Nunes Feb 16, 2018 at 15:03 Thanks calvin. Last week my head was tired and i couldn't fix. But today i fixed. But now i have a new problem. I need to change position of statement area. Also, i sharing my github link. You can examine this: github.com/ByErdem/AdvancedEnjoyHint – user5774297 Feb 19, 2018 at 13:46 Ok, let's go by parts... if this answer helped you, please mark as accepted and upvote. For the new question, please open a new question here in SO, we can't be talking here in the comments about another context. Thanks! – Calvin Nunes Feb 19, 2018 at 13:48