Untitled Application MyApp Author name 1.0 Desktop "[0,500]","[0,800]","[500,0]","[800,0]",[delay1],[delay2],[duration1],[duration2],[prop],[topic],[txt] True 640 480 False False False False WebApp False C:\Users\asmat\Documents\VisualNeoWeb\Libraries\img\default-icon.png #Taj { background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(0, 88, 255), rgb(223, 114, 161), rgb(247, 255, 187)) repeat scroll 0% 0%; transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; border-radius: 3px; } .tippy-box[data-theme~='tomato'] { background-color: tomato; color: yellow; } .tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before { border-top-color: tomato; } .tippy-box[data-theme~='tomato'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: tomato; } .tippy-box[data-theme~='tomato'][data-placement^='left'] > .tippy-arrow::before { border-left-color: tomato; } .tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before { border-right-color: tomato; } .css-button { border: medium none; color: rgb(255, 255, 255); background: rgb(66, 69, 87) none repeat scroll 0% 0%; will-change: opacity; font-size: 16px; font-weight: 600; border-radius: 4px; transition: background 0.2s ease 0s, color 0.2s ease 0s; box-shadow: black 0px 1px 4px -2px, rgba(255, 255, 255, 0.1) 0px 2px 1px -1px inset; user-select:none; } .css-div { background-color: #272935; margin: 15px -16px 25px; margin-right: -16px; margin-left: -16px; padding: 25px 10px; padding-right: 10px; padding-left: 10px; } .flexCenter{ display:flex; justify-content:center; align-items:center } .flexMenu{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start; } .flexSpacebetween{ display:flex; align-items:center; justify-content:space-between; } en standalone Offline page #000000 [AndroidOS,iOS,WindowsPhoneOS] normal True True False True True False False True False False CreateArray [prop] "arrow,hideOnClick,content,maxWidth,inertia,allowHTML,delay,followCursor,animateFill,inlinePositioning,interactive,interactiveBorder,interactiveDebounce,moveTransition,offset,theme,touch,zIndex" setvar [topic] "Tippy Plugin" 143px 130px 355px 98px flexCenter Tooltip Plugin 18px 290px 599px 70px flexCenter 260px 7px 104px 36px top 6px 6px color:#81edff css-button flexCenter Start gotonextpage 174px 387px 293px 62px Author: Asmat Qatea <br> version : 1.0.0 MasterPage setvar [topic] "Default" ...........simple tooltip........... asmatTooltip "button0" "I'm a tippy tooltip!" false 520 "mouseenter focus" "" "" "top" "light" asmatTooltip "button1" "I'm a tippy tooltip!" true 520 "mouseenter focus" "" "" "top" "light" 21px 72px 599px 151px css-div 470px 95px 114px 39px color:#81edff css-button flexCenter My button 12px 12px 400px 119px Tooltip Plugin is the complete tooltip and popover for the web, powered by Popper. It provides the logic and optional styling of elements that "pop out" from the flow of the document and float next to a target element. 344px 95px 114px 39px color:#81edff css-button flexCenter My button MasterPage setvar [topic] "duration" asmatTooltip "a1" "I'm a tippy tooltip!" true 0 "mouseenter focus" "fade" "" "top" "light" asmatTooltip "a2" "I'm a tippy tooltip!" true 1000 "mouseenter focus" "fade" "" "top" "light" CreateArray [duration1] 0,500 CreateArray [duration2] 500,0 asmatTooltip "a3" "I'm a tippy tooltip!" true [duration1] "mouseenter focus" "fade" "" "top" "light" asmatTooltip "a4" "I'm a tippy tooltip!" true [duration2] "mouseenter focus" "fade" "" "top" "light" 21px 72px 599px 138px css-div flexCenter ng-non-bindable 58px 35px 118px 39px top color:#81edff css-button flexCenter 0 193px 36px 119px 39px top 10px color:#81edff css-button flexCenter 1000 312px 58px 119px 39px top 10px color:#81edff css-button flexCenter [0,500] 377px 58px 119px 39px top 10px color:#81edff css-button flexCenter [500,0] MasterPage setvar [topic] "Animation" asmatTooltip "button2" "I'm a tippy tooltip!" true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltip "button3" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "light" 21px 72px 599px 151px css-div 326px 95px 118px 39px color:#81edff css-button flexCenter scale 12px 12px 400px 70px Your tooltip can have any type of transition animations. By default, it's a simple fade (opacity transition). 464px 95px 119px 39px color:#81edff css-button flexCenter fade MasterPage setvar [topic] "Placements" ...........placements-top........... asmatTooltip "top" "I'm a tippy tooltip!" false 400 "mouseenter focus" "" "" "top" "light" asmatTooltip "topStart" "Hello friends" false 400 "mouseenter focus" "" "" "top-start" "light" asmatTooltip "topEnd" "Hello friends" false 400 "mouseenter focus" "" "" "top-end" "light" ................................................. asmatTooltip "right" "I'm a tippy tooltip!" false 400 "mouseenter focus" "" "" "right" "light" asmatTooltip "rightStart" "Hello friends" false 400 "mouseenter focus" "" "" "right-start" "light" asmatTooltip "rightEnd" "Hello friends" false 400 "mouseenter focus" "" "" "right-end" "light" ..................................... asmatTooltip "bottom" "I'm a tippy tooltip!" false 400 "mouseenter focus" "" "" "bottom" "light" asmatTooltip "bottomStart" "Hello friends" false 400 "mouseenter focus" "" "" "bottom-start" "light" asmatTooltip "bottomEnd" "Hello friends" false 400 "mouseenter focus" "" "" "bottom-end" "light" ..................................... asmatTooltip "left" "I'm a tippy tooltip!" false 400 "mouseenter focus" "" "" "left" "light" asmatTooltip "leftStart" "Hello friends" false 400 "mouseenter focus" "" "" "left-start" "light" asmatTooltip "leftEnd" "Hello friends" false 400 "mouseenter focus" "" "" "left-end" "light" 21px 72px 599px 290px flexMenu css-div 10px 24px 562px 48px top Your tooltip can be placed on four different sides in relation to the reference element. Additionally, it can be aligned to the reference element edge, rather than being centered. 423px 13px 30% 39px top 3% 20px color:#81edff css-button flexCenter top 18px 33px 30% 39px top 2% 20px color:#81edff css-button flexCenter top-start 18px 72px 30% 39px top 2% 20px color:#81edff css-button flexCenter top-end 26px 23px 30% 39px top 3% 10px color:#81edff css-button flexCenter right 218px 23px 30% 39px top 2% 10px color:#81edff css-button flexCenter right-start 409px 23px 30% 39px top 2% 10px color:#81edff css-button flexCenter right-end 26px 77px 30% 39px top 3% 10px color:#81edff css-button flexCenter bottom 218px 77px 30% 39px top 2% 10px color:#81edff css-button flexCenter bottom-start 409px 77px 30% 39px top 2% 10px color:#81edff css-button flexCenter bottom-end 26px 131px 30% 39px top 3% 10px color:#81edff css-button flexCenter left 218px 131px 30% 39px top 2% 10px color:#81edff css-button flexCenter left-start 409px 131px 30% 39px top 2% 10px color:#81edff css-button flexCenter left-end 45px 376px 562px 77px If a tooltip cannot fit within its desired placement, it will flip to the opposite placement if there is not enough space. In the above examples, flipping has been disabled to demonstrate each placement properly. MasterPage setvar [topic] "Themes" asmatTooltip "b1" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "light" asmatTooltip "b2" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "dark" asmatTooltip "b3" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "tomato" asmatTooltip "b4" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "material" asmatTooltip "b5" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "light-border" asmatTooltip "b6" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "translucent" 21px 72px 599px 82px css-div flexCenter 58px 35px 118px 39px top color:#81edff css-button flexCenter light 193px 36px 119px 39px top 10px color:#81edff css-button flexCenter dark 312px 58px 119px 39px top 10px color:#81edff css-button flexCenter tomato 16px 329px 400px 70px Your tooltip can have custom styling. see also css part for "tomato" custom theme 21px 166px 599px 82px css-div flexCenter 58px 35px 118px 39px top color:#81edff css-button flexCenter material 193px 36px 119px 39px top 10px color:#81edff css-button flexCenter light-border 312px 58px 119px 39px top 10px color:#81edff css-button flexCenter translucent MasterPage setvar [topic] "Properties" .....interactive asmatTooltip "d1" "You can select the text inside here." true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltipSetProperties "d1" "interactive" true ....allowHTML asmatTooltip "d2" "<strong>Bolded <span style='color: aqua;'>content</span></strong>" true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltipSetProperties "d2" "allowHTML" true .....Delay asmatTooltip "d3" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltipSetProperties "d3" "delay" 500 asmatTooltip "d4" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" CreateArray [delay1] 800,0 asmatTooltipSetProperties "d4" "delay" [delay1] asmatTooltip "d5" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" CreateArray [delay2] 0,800 asmatTooltipSetProperties "d5" "delay" [delay2] .....followCursor asmatTooltip "e1" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltipSetProperties "e1" "followCursor" "default" asmatTooltip "e2" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltipSetProperties "e2" "followCursor" "horizontal" asmatTooltip "e3" "Salam" true 500 "mouseenter focus" "scale" "" "left" "light" asmatTooltipSetProperties "e3" "followCursor" "vertical" asmatTooltip "e4" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" asmatTooltipSetProperties "e4" "followCursor" "intial" 21px 72px 599px 75px css-div flexCenter ng-non-bindable 58px 35px 130px 39px top color:#81edff css-button flexCenter Interactive 193px 36px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" allowHTML 18px 160px 599px 75px css-div flexCenter ng-non-bindable 58px 35px 130px 39px top color:#81edff css-button flexCenter Delay 500 193px 36px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" [800,0] 313px 26px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" [0,800] 18px 246px 599px 75px css-div flexCenter ng-non-bindable 58px 35px 130px 39px top color:#81edff css-button flexCenter Default 193px 36px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" Horizontal 313px 26px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" Vertical 383px 26px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" Intial MasterPage setvar [topic] "Triggers" asmatTooltip "c1" "I'm a tippy tooltip!" true 500 "click" "fade" "" "top" "light" asmatTooltip "c2" "I'm a tippy tooltip!" true 500 "focusin" "fade" "" "top" "light" asmatTooltip "c3" "I'm a tippy tooltip!" true 500 "mouseenter focus" "fade" "" "top" "light" 21px 72px 599px 138px css-div flexCenter ng-non-bindable Your tippy can have custom styling. 58px 35px 130px 39px top color:#81edff css-button flexCenter click 193px 36px 130px 39px top 10px color:#81edff css-button flexCenter tabindex="1" focus 312px 58px 130px 39px top 10px color:#81edff css-button flexCenter mouse enter MasterPage setvar [topic] "Change Content" asmatTooltip "f1" "Salam" true 500 "mouseenter focus" "scale" "" "top" "light" 21px 72px 599px 138px css-div flexCenter 98px 50px 240px 39px top color:#81edff css-button flexCenter 0px 0px 240px 39px top txt text.. asmatTooltipSetProperties "f1" "content" [txt] 373px 58px 119px 39px top 10px color:#81edff css-button flexCenter Hi MasterPage setvar [topic] "Method" ...........simple tooltip........... asmatTooltip "button4" "I'm a tippy tooltip!" true 500 "mouseenter focus" "scale" "" "top" "light" 21px 72px 599px 151px css-div flexCenter 237px 50px 114px 39px top color:#81edff css-button flexCenter My button 26px 234px 599px 79px css-div flexCenter 257px 20px 80px 39px top color:#81edff css-button flexCenter Show asmatTooltipMethod "button4" "show" 259px 28px 80px 39px top 10px color:#81edff css-button flexCenter Hide asmatTooltipMethod "button4" "hide" 313px 28px 80px 39px top 10px color:#81edff css-button flexCenter Disable asmatTooltipMethod "button4" "disable" 367px 28px 80px 39px top 10px color:#81edff css-button flexCenter Enable asmatTooltipMethod "button4" "enable" 421px 28px 80px 39px top 10px color:#81edff css-button flexCenter Destroy asmatTooltipMethod "button4" "destroy" 21px 10px 599px 50px flexSpacebetween 216px 7px 80px 36px top 6px 6px color:#81edff css-button flexCenter Prev GotoPrevPage 136px 3px 272px 44px top flexCenter [topic] 127px 4px 80px 36px top 6px 6px color:#81edff css-button flexCenter Next gotonextpage 9px 454px 254px 21px PageNumber:[NAB.PageNumber] 0px 0px 640px 480px False custom