Можно ли вставить разрыв строки в этой подсказке? - PullRequest
Новая
       23

Можно ли вставить разрыв строки в этой подсказке?

2 голосов
/ 26 августа 2010

У меня есть красивая карта США:

http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg

Я хотел бы реализовать всплывающую подсказку с многострочным функционалом, например, здесь над красным квадратом:

http://www.carto.net/papers/svg/gui/tooltips/

пожалуйста, помогите мне начать это. я буду предлагать максимальную награду за это.

Ответы [ 9 ]

4 голосов
/ 25 августа 2010

Почему бы не использовать магию jQuery и использовать заголовок "Атрибут" вместо заголовка "Тег" ?
Я думаю, что вы путаете их в исходном вопросе

Проверьте это jsFiddle

http://jsfiddle.net/s5qUw/2/

Я также использовал подсказку jQuery Tools

Разметка Примечание: в основном все, что вам нужно сделать, это добавить атрибут title и класс addtooltip к любому элементу страницы, к которому вы хотите добавить всплывающую подсказку. Затем вы можете использовать CSS для стилизации всплывающей подсказки, как считаете нужным. 

<path
   id="AK"
   class="addtooltip"
   style="fill:#f2d0ff" 
   onmousemove="GetTrueCoords(evt);"
   title="this sis ak<br>with a line break">
</path>

CSS 

.tooltip {
    display:none;
    background-color:black;
    font-size:12px;
    height:40px;
    width:160px;
    padding:25px;
    color:#fff;    
}

Сценарий (внизу вашей страницы) 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".addtooltip").tooltip();
    }); // closes document.ready
</script>
1 голос
/ 31 августа 2012

Я достиг этого, создав значение всплывающей подсказки с помощью <br/> со стороны моего сервера.

1 голос
/ 26 августа 2010

Ты никогда не перестаешь меня удивлять, я __! Сколько проектов вы работаете?

Всплывающие подсказки - это быстро генерируемые браузером всплывающие окна; Вы должны использовать \n для установки атрибута .title в JavaScript.

1 голос
/ 26 августа 2010

Очевидно, это известная проблема, и вы должны решить ее следующим образом: 

<desc>
   <tspan x="10" y="10">An orange</tspan>
   <tspan x="10" y="24.5">circle</tspan>
</desc>
1 голос
/ 25 августа 2010

Не.

Заголовок страницы передается браузеру и не отображается на странице; обычно это означает, что он отображается в строке заголовка приложения . На самом деле, рендеринг новой строки сделает строку заголовка в два раза больше (или больше, с несколькими новыми строками) - и этого не произойдет.

0 голосов
/ 30 сентября 2014

При наведении курсора на элемент SVG с дочерним элементом <title> самый простой выбор, когда его можно сократить . Оба FF / Chrome будут расширять его в одну строку. IE автоматически ограничит его до 50 символов. Следующая команда возьмется за всплывающую подсказку и разорвет ее строку, вставив разрывы строк (\ n) в нужном месте между словами. Функция String.prototpye может быть применена до / после заполнения текста <title>. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG ToolTip line breaks</title>
</head>
<body>
<center>
Three Elements Contained in a &lt;g>, plus a &lt;title> element,<br /> used as its tooltip.<br />
<svg width=400 height=400>
<g>
<circle cx=150 cy=150 r=60 fill=red />
<rect x=200 y=200 width=60 height=60 fill=lime />
<ellipse cx=300 cy=300 rx=60 ry=20 fill=blue />
<title id=myToolTip>This is a tool tip for this symbol (a group of elements), that will help describe what it is</title>
</g></svg>
<br /><button onClick=wrapToolTip(25)>wrap tooltip</button>
</center>
</body>
<script>
/* --- Adds SVG line break at space between words when it would exceed the max length
(or if a single loooong word exceeds the Max Line length)
Also usable for HTML line break by including true arg---
*/
String.prototype.fullWrap= function(maxLineLength,htm){
    var str1, tem, ax, diff, lim, S= [], br;
    var A= this.split(/\\s*\//);

    while(A.length){
        str1= A.shift();
        while(str1 && str1.length> maxLineLength){
            if(ax=== 0 && /^\\S/.test(str1)) S[S.length-1]+= '-';
            tem= str1.substring(0, maxLineLength);
            ax= tem.lastIndexOf(' ')+ 1;
            if(ax== 0){
                S.push(str1.substring(0, maxLineLength-1));
                str1= str1.substring(maxLineLength-1);
            }
            else{
                tem= str1.substring(0, ax);
                str1= str1.substring(ax);
                S.push(tem);
            }
        }
        if(str1) S.push(str1);
    }
    if(htm)
        br="<br/>" //--html--
    else
        br="\n"  //----text line break
    return S.join(br);
}

function wrapToolTip(maxLen)
{
   myToolTip.firstChild.data=myToolTip.firstChild.data.fullWrap(maxLen)
}
</script>
</html>
0 голосов
/ 25 августа 2010

Ну, это зависит от того, где вы хотите, чтобы этот разрыв строки отображался ...
Если он должен отображаться на странице, вы должны добавить <br />, если вам нужно, чтобы он отображался только на коде страницы., вы должны добавить \n.
, если вы хотите сделать то, что вы просили, вам просто нужно заменить в своем коде , в <br />, если этот текст будет отображаться в подсказке HTML.Если это будет показано в предупреждении Javascript, вы должны использовать \n.

0 голосов
/ 25 августа 2010

Добавьте <br/> там, где хотите перерыв.

0 голосов
/ 25 августа 2010

Разрыв строки в html - <br />. Вы можете добавить это где угодно.

К вашему сведению - тега с именем 'field1' нет, поэтому ваш вызов getElementsByTagName ничего не найдет.

...