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 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....
–
–
–