diff --git a/assets/svgs/help.svg b/assets/svgs/help.svg
new file mode 100644
index 00000000..e738bcda
--- /dev/null
+++ b/assets/svgs/help.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/svgs/info.svg b/assets/svgs/info.svg
new file mode 100644
index 00000000..9aa6ffb3
--- /dev/null
+++ b/assets/svgs/info.svg
@@ -0,0 +1,16 @@
+
\ No newline at end of file
diff --git a/assets/svgs/plus-btn.svg b/assets/svgs/plus-btn.svg
new file mode 100644
index 00000000..4175f998
--- /dev/null
+++ b/assets/svgs/plus-btn.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/assets/svgs/search.svg b/assets/svgs/search.svg
new file mode 100644
index 00000000..010087fc
--- /dev/null
+++ b/assets/svgs/search.svg
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/src/auto_gen/svgs.js b/src/auto_gen/svgs.js
index ad1df5eb..d4f6957d 100644
--- a/src/auto_gen/svgs.js
+++ b/src/auto_gen/svgs.js
@@ -12,10 +12,14 @@ svgs["cross"] = '';
svgs["dots"] = '';
svgs["dropdown_arrow_down"] = '';
+svgs["help"] = '';
+svgs["info"] = '';
svgs["info_outlined"] = '';
svgs["mode_edit_outlined"] = '';
+svgs["plus-btn"] = '';
svgs["plus"] = '';
svgs["search-black"] = '';
+svgs["search"] = '';
svgs["style-outlined"] = '';
svgs["tooltip"] = '';
svgs["white-dots"] = '';
diff --git a/src/changelog.md b/src/changelog.md
new file mode 100644
index 00000000..ce4f061d
--- /dev/null
+++ b/src/changelog.md
@@ -0,0 +1,8 @@
+# Changelog
+
+## [Unreleased]
+### Added
+- Icons called help,search,info svg
+
+### Fixed
+- Resolved Tooltip style issue
diff --git a/src/components/NInput/NInput.vue b/src/components/NInput/NInput.vue
index 21498a19..94f497ca 100644
--- a/src/components/NInput/NInput.vue
+++ b/src/components/NInput/NInput.vue
@@ -78,6 +78,7 @@
class="n-input input-text"
:maxlength="maxlength"
:disabled="disabled"
+ :autocomplete="autocomplete"
:ref="id"
:id="id"
:placeholder="placeholder"
@@ -126,7 +127,7 @@ export default {
props: {
autocomplete: {
type: String,
- default: null,
+ default: 'off',
},
type: {
type: String,
diff --git a/src/components/NTooltip/NTooltip.vue b/src/components/NTooltip/NTooltip.vue
index 8e4e4f5a..3bb9af7c 100644
--- a/src/components/NTooltip/NTooltip.vue
+++ b/src/components/NTooltip/NTooltip.vue
@@ -54,7 +54,6 @@ export default {
.nitrozen-tooltiptext {
visibility: hidden;
min-width: 150px;
- // min-width: 150px;
color: @WhiteColor;
text-align: center;
border-radius: 6px;
@@ -63,17 +62,16 @@ export default {
font-size: @BaseFontSize;
background-color: @Gray1;
padding: 10px;
- left: -29px;
- bottom: 19px;
- text-align: left;
- z-index: 99;
+ z-index: 1000; /* Make sure the tooltip is above other elements */
line-height: 19px;
font-weight: 400;
- max-width:200px;
+ max-width: 250px;
display: flex;
- align-items: flex-start;
+ align-items: center;
justify-content: center;
flex-direction: column;
+ opacity: 0; /* Initially hidden */
+ transition: opacity 0.3s ease-in-out;
& a{
color: @WhiteColor;
@@ -87,16 +85,15 @@ export default {
content: " ";
position: absolute;
border-style: solid;
- border-width: 5px;
+ border-width: 6px;
border-color: @Gray1 transparent transparent transparent;
- left: auto;
- right: 50%;
}
}
&:hover {
.nitrozen-tooltiptext {
visibility: visible;
+ opacity: 1;
}
}
}
@@ -105,10 +102,11 @@ export default {
.nitrozen-tooltip-bottom {
top: 100%;
left: 50%;
- margin-left: -60px;
+ transform: translateX(-50%);
+ margin-top: 10px;
&::after {
bottom: 100%; /* At the top of the tooltip */
- left: 30%;
+ left: 50%;
margin-left: -5px;
transform: rotate(180deg);
}
@@ -117,33 +115,37 @@ export default {
.nitrozen-tooltip-top {
bottom: 100%;
left: 50%;
- margin-left: -45px;
+ transform: translateX(-50%);
+ margin-bottom: 10px;
&::after {
top: 100%; /* At the bottom of the tooltip */
- left: 30%;
- margin-left: -5px;
+ left: 50%;
+ transform: translateX(-50%) rotate(0deg)
}
}
.nitrozen-tooltip-left {
- top: -5px;
+ top: 50% ;
right: 105%;
+ transform: translateY(-50%);
+ margin-right: 10px;
&::after {
top: 50%;
left: 100%; /* To the left of the tooltip */
- margin-top: -5px;
transform: rotate(270deg);
+ transform: translateY(-50%) rotate(270deg);
}
}
.nitrozen-tooltip-right {
- top: -5px;
- left: 105%;
+ top: 50%;
+ left: 100%;
+ transform: translateY(-50%);
+ margin-left: 10px;
&::after {
top: 50%;
- right: 100%; /* To the right of the tooltip */
- margin-top: -5px;
- transform: rotate(90deg);
+ right: 100%; /* To the right of the tooltip */;
+ transform: translateY(-50%) rotate(90deg); /* Pointing right */
}
}
diff --git a/src/utils/svgs.js b/src/utils/svgs.js
index fe17f5b5..1a19d65e 100644
--- a/src/utils/svgs.js
+++ b/src/utils/svgs.js
@@ -116,5 +116,4 @@ svgs['help'] = `
`
-svgs['loader']=``
module.exports = svgs;
\ No newline at end of file