2 Replies Latest reply on Jul 27, 2007 6:54 AM by patmck47

    toolTip

    patmck47
      I am using the script below to set up the tooltip and then the short script below that to actiivate it on a button (dot on a map). But I want to be able to use html in the text, and i can't find the right place/right way to script it. any help would be appreciated! thank you.

      // create the tooltip clip
      _root.createEmptyMovieClip("ToolTip", 15999);
      // add the tooltip background box
      _root.ToolTip.createEmptyMovieClip("TipBackground", 1);
      with (_root.ToolTip.TipBackground) {
      beginFill(0xffffff, 100);
      lineStyle(1, 0x000000, 100);
      moveTo(0, 0);
      lineTo(125, 0);
      lineTo(125, 65);
      lineTo(0, 65);
      lineTo(0, 0);
      endFill();
      }
      var my_fmt:TextFormat = new TextFormat();
      my_fmt.font = "Arial";
      my_fmt.size = 10;
      my_fmt.bold = false;
      // add the tooltip textfield. you could easily apply a
      // textFormat to this to customise the text more.
      _root.ToolTip.createTextField("TipText", 2, 2, 0, 200, 65);
      _root.ToolTip.TipText.type = "dynamic";

      _root.ToolTip.TipText.setNewTextFormat(my_fmt);
      // hide the tip initially
      CloseTip();
      // mouse listener for tooltips
      TipMover = new Object();
      TipMover.onMouseMove = function() {
      ToolTip._x = _xmouse;
      ToolTip._y = _ymouse+20;
      };
      // adds a text-description of the buttons function
      function DisplayTip(tip) {
      Mouse.addListener(TipMover);
      ToolTip._x = _xmouse;
      ToolTip._y = _ymouse+20;
      ToolTip.swapDepths(15999);
      ToolTip._alpha = 100;
      ToolTip.TipText.text = tip;
      ToolTip.TipText.width = ToolTip.TipText.textWidth;
      ToolTip.TipBackground._width = ToolTip.TipText.textWidth+8;
      }
      // hide tip
      function CloseTip() {
      Mouse.removeListener(TipMover);
      ToolTip._alpha = 0;
      ToolTip.TipText.text = "";
      }
      this.onRollOut = this.onDragOut=function () {
      hide();
      };


      then at each button, i have this:

      // code from on a button



      on(rollOver)
      {

      _root.DisplayTip("<i>Sacramento, CA</i>\nPatricia Blvd.\nSacramento, CA 12345\n1-800-222-2345");

      }
      on(rollOut)
      {
      _root.CloseTip();
      }
        • 1. Re: toolTip
          injpix Level 3
          Are the HTML tags not rendering the text? Have you tried embedding the font?
          • 2. Re: toolTip
            patmck47 Level 1
            I discovered my error. while i did code: ToolTip.TipText.html = true; i had not added: ToolTip.TipText.htmlText = tip; once i added that, it worked -- although it does not recognize <br> for some reason, so I'm using \n

            Now i want to also use css. but that is only partially working. i get the bold and the font color to work but not background color. I'm sure i have my code for css in the wrong palce because i don't really understand what i'm doing!!!!! (-: I just keep moving code till it works.

            here is my main code:
            // create the tooltip clip
            _root.createEmptyMovieClip("ToolTip", 15999);
            // add the tooltip background box
            _root.ToolTip.createEmptyMovieClip("TipBackground", 1);
            with (_root.ToolTip.TipBackground) {
            beginFill(0xffcc00, 100);
            lineStyle(1, 0x000000, 100);
            moveTo(0, 0);
            lineTo(125, 0);
            lineTo(125, 65);
            lineTo(0, 65);
            lineTo(0, 0);
            endFill();
            }
            var my_fmt:TextFormat = new TextFormat();
            my_fmt.font = "Arial";
            my_fmt.size = 10;
            my_fmt.bold = false;
            // add the tooltip textfield. you could easily apply a
            // textFormat to this to customise the text more.
            _root.ToolTip.createTextField("TipText", 2, 2, 0, 200, 165);
            _root.ToolTip.TipText.type = "dynamic";
            //_root.ToolTip.TipText.html = true;


            _root.ToolTip.TipText.setNewTextFormat(my_fmt);
            // hide the tip initially
            CloseTip();
            // mouse listener for tooltips
            TipMover = new Object();
            TipMover.onMouseMove = function() {
            ToolTip._x = _xmouse;
            ToolTip._y = _ymouse+20;
            };

            //define new StyleSheet object
            var myStyle = new TextField.StyleSheet();
            //when it loads, use it to format text
            myStyle.onLoad = function () {
            ToolTip.TipText.styleSheet = this;
            myStyle.load("map.css");
            }


            // adds a text-description of the buttons function
            function DisplayTip(tip) {
            Mouse.addListener(TipMover);
            ToolTip._x = _xmouse;
            ToolTip._y = _ymouse+20;
            ToolTip.swapDepths(15999);
            ToolTip._alpha = 100;

            ToolTip.TipText.html = true;
            ToolTip.TipText.htmlText = tip;
            ToolTip.TipText.width = ToolTip.TipText.textWidth;
            ToolTip.TipBackground._width = ToolTip.TipText.textWidth+22;
            ToolTip.TipText.height = ToolTip.TipText.textHeight;
            ToolTip.TipBackground._height = ToolTip.TipText.textHeight+7;

            }
            // hide tip
            function CloseTip() {
            Mouse.removeListener(TipMover);
            ToolTip._alpha = 0;
            ToolTip.TipText.text = "";
            }
            this.onRollOut = this.onDragOut=function () {
            hide();
            };


            here is my code at the button:


            // code from on a button



            on(rollOver)
            {

            _root.DisplayTip("<p class='title'>Sacramento, CA</p><p>Patricia Blvd.\nSacramento, CA 12345\n1-800-222-2345</p>");

            }
            on(rollOut)
            {
            _root.CloseTip();
            }

            and here is my css:
            /* CSS Document */

            .title {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:16px;
            font-weight:bold;
            color:#FFFFFF;
            background-color:#000000;
            }
            any help would be appreciated. Thank you! Text