Loading, please wait...

ARTDESIGN TOOL TIP

SETTINGS

Attributes

data-plugin-ad-tooltip="ad-tooltip"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content">ArtDesign ToolTip</div>

data-ad-tooltip-options="Blue, FullBlue"

This attribute overwrites the settings of the plugin
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content"  data-ad-tooltip-options="Blue, FullBlue">ArtDesign ToolTip</div>

data-ad-tooltip-title="Title"

This attribute sets title of the ToolTip
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content">ArtDesign ToolTip</div>

data-ad-tooltip-content="Content"

This attribute sets content of the ToolTip
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content">ArtDesign ToolTip</div>

data-ad-tooltip-position="RightMiddle"

This attribute sets position of the ToolTip
<!--TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, LeftTop, LeftMiddle, LeftBottom, RightTop, RightMiddle, RightBottom-->
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content" data-ad-tooltip-position="RightMiddle">ArtDesign ToolTip</div>

data-ad-tooltip-x="-18"

This attribute fix the horizontal position of the ToolTip /at px/
<!--TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight-->
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content" data-ad-tooltip-x="-18">ArtDesign ToolTip</div>

data-ad-tooltip-y="-18"

This attribute fix the vertical position of the ToolTip /at px/
<!--LeftTop, LeftMiddle, LeftBottom, RightTop, RightMiddle, RightBottom-->
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content" data-ad-tooltip-position="RightTop" data-ad-tooltip-x="-18">ArtDesign ToolTip</div>

data-ad-tooltip-external-content="#Content"

This attribute tells the plugin to show external content in the ToolTip
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-external-content="#Content">ArtDesign ToolTip</div>
<div id="Content"><div>External content</div></div>

data-ad-tooltip-target="#Target"

This attribute tells the plugin to attached the ToolTip to different target position
<div class="ToolTipBox WedgeWood" data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content" data-ad-tooltip-target="#Target">ArtDesign ToolTip</div>
<div id="Target">Target</div>

data-ad-tooltip-event="Click"

This attribute tells the plugin to show the ToolTip at Click event
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content" data-ad-tooltip-event="Click">ArtDesign ToolTip</div>

data-ad-tooltip-event="Focus"

This attribute tells the plugin to show the ToolTip at Focus event
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="Title" data-ad-tooltip-content="Content" data-ad-tooltip-event="Focus">ArtDesign ToolTip</div>

Public Methods

Destroy

<script type="text/javascript">
    var ToolTip = $(".ArtDesign").ArtDesignSlider();
    ToolTip.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "TT_", // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "TT_"
        AddRemoveContentClass: true, // If it is true it adds class for destroy method; Must be boolean; By default: true
        AppendTo: "", ////
        ListenScrollElement: "body" // Set the listen scroll element; Must be string; By default: "body"
    },
    Global: { // Global settings of the element
        Position: "TopLeft", // Set position of the element; Must be string; By default: "TopLeft"
        MinWidth: "10px", // Set the MinWidth of the element; Must be string (px, %, auto); By default: "10px"
        MaxWidth: "", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: ""
        Width: "100%", // Set the Width of the element; Must be string (px, %, auto); By default: "100px"
        MaxHeight: "", // Set the MaxHeight of the element; Must be string (px, %, auto); By default: ""
        Padding: "10px", // Set the padding of the element; Must be string (px, %, auto); By default: "10px"
        MarginX: 0, // Set the MarginX; Must be integer; By default: 0
        MarginY: 0, // Set the MarginY; Must be integer; By default: -8
        ForceNativePosition: false, // if it is true it force sets a native position; Must be boolean; By default: false
        ZIndex: 9999, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 9999
        AnimationSpeed: 0.25, // Set the AnimationSpeed; Must be decimal; By default: 0.3
        AnimationEasy: Linear.easeNone, //Back.easeOut.config(1), y: 0 // Set the AnimationEasy; By default: Linear.easeNone
        AnimationDelay: 0.1 //Back.easeOut.config(1), y: 0 // Set the AnimationEasy; By default: Linear.easeNone
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Animation: { // Settings for animation
        OpacityStart: 0, // Set the opacity start; Must be integer or decimal; By default: 0
        OpacityEnd: 1, // Set the opacity end; Must be integer or decimal; By default: 1
        ScaleStart: 1, // Set the scale start; Must be integer or decimal; By default: 0.5
        ScaleEnd: 1 // Set the scale end; Must be integer or decimal; By default: 1
    },
    Title: { // Settings for the Title
        FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
        FontSize: "14px", // Set the size of the font; Must be string; By default: "14px"
        FontWeight: "bold", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "bold"
        FontStyle: "bold", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "bold"
        Color: "#719AC1", // Set the color of the font; Must be string; By default: "#719AC1"
        LineHeight: "1.2em" // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.2em"
    },
    Content: { // Settings for the Content
        FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
        FontSize: "13px", // Set the size of the font; Must be string; By default: "13px"
        FontWeight: "normal", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "normal"
        FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
        Color: "#719AC1", // Set the color of the font; Must be string; By default: "#719AC1"
        LineHeight: "1.4em" // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.4em"
    },
    TopPosition: { // Settings for TopPosition
        ToolTipDistance: 13, // Set the ToolTip distance; Must be integer; By default: 13
        ArrowYDistance: 20, // Set the Arrow distance; Must be integer; By default: 13
        Background: { // background setting for different browsers
            BackgroundColor: "rgba(234, 234, 234, 1)",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(234, 234, 234, 1)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA', endColorstr='#EAEAEA', GradientType=0)"
        },
        Border: { // Settings for the Border
            BorderTopWidth: 0, // Set the BorderTopWidth; Must be String; By default: 0
            BorderTopColor: "#719AC1", // Set BorderTopColor without gradient; By default: "#719AC1"
            BorderBottomWidth: 3, // Set the BorderBottomWidth; Must be String; By default: 3
            BorderBottomColor: "#719AC1", // Set BorderBottomColor without gradient; By default: "#719AC1"
            BorderLeftWidth: 0, // Set the BorderLeftWidth; Must be String; By default: 0
            BorderLeftColor: "#719AC1", // Set BorderLeftColor without gradient; By default: "#719AC1"
            BorderRightWidth: 0, // Set the BorderRightWidth; Must be String; By default: 0
            BorderRightColor: "#719AC1", // Set BorderRightColor without gradient; By default: "#719AC1"
            BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
        },
        ArrowSize: 8, // Set the size of the arrow; Must be integer; By default: 8
        ArrowBackground: "#719AC1" // Set the background of the arrow; Must be string; By default: "#719AC1"
    },
    BottomPosition: { // Settings for BottomPosition
        ToolTipDistance: 13, // Set the ToolTip distance; Must be integer; By default: 13
        ArrowYDistance: 20, // Set the Arrow distance; Must be integer; By default: 20
        Background: { // background setting for different browsers
            BackgroundColor: "rgba(234, 234, 234, 1)",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(61,106,148,1) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(61,106,148,1)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA', endColorstr='#EAEAEA', GradientType=0)"
        },
        Border: { // Settings for the Border
            BorderTopWidth: 3, // Set the BorderTopWidth; Must be String; By default: 3
            BorderTopColor: "#719AC1", // Set BorderTopColor without gradient; By default: "#719AC1"
            BorderBottomWidth: 0, // Set the BorderBottomWidth; Must be String; By default: 0
            BorderBottomColor: "#719AC1", // Set BorderBottomColor without gradient; By default: "#719AC1"
            BorderLeftWidth: 0, // Set the BorderLeftWidth; Must be String; By default: 0
            BorderLeftColor: "#719AC1", // Set BorderLeftColor without gradient; By default: "#719AC1"
            BorderRightWidth: 0, // Set the BorderRightWidth; Must be String; By default: 0
            BorderRightColor: "#719AC1", // Set BorderRightColor without gradient; By default: "#719AC1"
            BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
        },
        ArrowSize: 8, // Set the size of the arrow; Must be integer; By default: 8
        ArrowBackground: "#719AC1" // Set the background of the arrow; Must be string; By default: "#719AC1"
    },
    LeftPosition: { // Settings for LeftPosition
        ToolTipDistance: 13, // Set the ToolTip distance; Must be integer; By default: 13
        ArrowYDistance: 20, // Set the Arrow distance; Must be integer; By default: 20
        Background: { // background setting for different browsers
            BackgroundColor: "rgba(39, 44, 48, 1)",
            MozLinearGradient: "-moz-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            WebkitGradient: "-webkit-gradient(left top, right top, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(234, 234, 234, 1)))",
            WebkitLinearGradient: "-webkit-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            OLinearGradient: "-o-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            MSLinearGradient: "-ms-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            LinearGradient: "linear-gradient(to right, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA', endColorstr='#EAEAEA', GradientType=1)"
        },
        Border: { // Settings for the Border
            BorderTopWidth: 0, // Set the BorderTopWidth; Must be String; By default: 0
            BorderTopColor: "#719AC1", // Set BorderTopColor without gradient; By default: "#719AC1"
            BorderBottomWidth: 0, // Set the BorderBottomWidth; Must be String; By default: 0
            BorderBottomColor: "#719AC1", // Set BorderBottomColor without gradient; By default: "#719AC1"
            BorderLeftWidth: 0, // Set the BorderLeftWidth; Must be String; By default: 0
            BorderLeftColor: "#719AC1", // Set BorderLeftColor without gradient; By default: "#719AC1"
            BorderRightWidth: 3, // Set the BorderRightWidth; Must be String; By default: 3
            BorderRightColor: "#719AC1", // Set BorderRightColor without gradient; By default: "#719AC1"
            BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
        },
        ArrowSize: 8, // Set the size of the arrow; Must be integer; By default: 8
        ArrowBackground: "#719AC1" // Set the background of the arrow; Must be string; By default: "#719AC1"
    },
    RightPosition: { // Settings for RightPosition
        ToolTipDistance: 13, // Set the ToolTip distance; Must be integer; By default: 13
        ArrowYDistance: 20, // Set the Arrow distance; Must be integer; By default: 20
        Background: { // background setting for different browsers
            BackgroundColor: "rgba(39, 44, 48, 1)",
            MozLinearGradient: "-moz-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            WebkitGradient: "-webkit-gradient(left top, right top, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(234, 234, 234, 1)))",
            WebkitLinearGradient: "-webkit-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            OLinearGradient: "-o-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            MSLinearGradient: "-ms-linear-gradient(left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            LinearGradient: "linear-gradient(to right, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 1) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA', endColorstr='#EAEAEA', GradientType=1)"
        },
        Border: { // Settings for the Border
            BorderTopWidth: 0, // Set the BorderTopWidth; Must be String; By default: 0
            BorderTopColor: "#719AC1", // Set BorderTopColor without gradient; By default: "#719AC1"
            BorderBottomWidth: 0, // Set the BorderBottomWidth; Must be String; By default: 0
            BorderBottomColor: "#719AC1", // Set BorderBottomColor without gradient; By default: "#719AC1"
            BorderLeftWidth: 3, // Set the BorderLeftWidth; Must be String; By default: 3
            BorderLeftColor: "#719AC1", // Set BorderLeftColor without gradient; By default: "#719AC1"
            BorderRightWidth: 0, // Set the BorderRightWidth; Must be String; By default: 0
            BorderRightColor: "#719AC1", // Set BorderRightColor without gradient; By default: "#719AC1"
            BorderRadius: "0px" // Set the BorderRadius; Must be String; By default: "0px"
        },
        ArrowSize: 8, // Set the size of the arrow; Must be integer; By default: 8
        ArrowBackground: "#719AC1" // Set the background of the arrow; Must be string; By default: "#719AC1"
    }
</script>